如何在此Wordpress主题中获得可滚动的左侧菜单

Question

我正在尝试为此站点的基础Worpress主题修改CSS代码：https://isspm2021.webs.upv.es/。主题是这个：https://wordpress.org/themes/escapade/。

[我想做的是在屏幕尺寸为1024×768时获得一个垂直可滚动的左菜单。

这就是我现在得到的：

如您所见，根据屏幕尺寸，左侧菜单的最后一项保持隐藏和不可访问。我希望左侧菜单在需要时可以垂直滚动。

我尝试了几条CSS指令，例如overflow:scroll，但没有成功。

我认为是因为主题本身；更确切地说，由于这样的方式，将不同的div元素定义为相对于其他元素放置[position:relative等）。

关于如何修改此主题的CSS样式以获得我需要的任何提示？

Answer 1

我建议将这些菜单滚动显示：

1. 设置菜单部分的高度，
2. Set Overflow-y：auto;

这是解决方法：

.main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}

此外，如果您希望在浏览器尺寸小于1024px时显示滚动条，请在下面添加代码：

@media all and (max-width:1024px){
 .main-navigation-container, .main-navigation.open, .main-navigation ul ul, .main-navigation .sub-menu {
background-color: #f5f5f5;
overflow-y: auto;
height: 400px;
}
}

以上是两个选项。请不要同时插入两个。一次只能使用一个来查看更改。