Как получить прокручиваемое левое меню в этой теме Wordpress

Question

Я пытаюсь изменить код CSS базовой темы Worpress для этого сайта: https://isspm2021.webs.upv.es/. Тема такая: https://wordpress.org/themes/escapade/.

Я пытаюсь получить вертикально прокручиваемое левое меню, когда размер экрана, скажем, 1024 × 768.

Вот что я получаю сейчас:

Как видите, последние элементы левого меню остаются скрытыми и недоступными, в зависимости от размер экрана. Я бы хотел, чтобы левое меню было вертикально прокручиваемым при необходимости.

Я пробовал несколько инструкций CSS, например overflow:scroll, безуспешно.

Думаю, это это из-за самой темы; точнее, из-за того, как различные элементы div определены для размещения относительно других (position:relative и так далее).

Любой намек на то, как изменить стиль CSS этой темы на получить то, что мне нужно?

Answer 1

Если вы можете принять полную прокрутку левой панели навигации, вы можете добавить свойство overflow: auto в .side-masthead:

.side-masthead {
    background-color: #f5f5f5;
    overflow: auto; /* Add overflow property */
}

Answer 2

Я бы предложил следующие варианты прокрутки меню:

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;
}

Кроме того, если вы хотите, чтобы прокрутка отображалась, когда размер браузера меньше 1024 пикселей, введите код ниже:

@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;
}
}

Выше есть два варианта. Не вставляйте их оба. Используйте только по одному, чтобы увидеть изменения.