Прокрутка сайдбара

[muster]

Вот это помощь дак помощь. Огромное спасибо. В выходные попробую разобраться. Вроде информации уже хватит. Посмотрим.

[Plan]

У меня меню прокручивается и так, не понимаю в чем проблема))
Дайте ссылку на сайт и объясните подробнее!
Даже в вашем скриншоте есть полоса прокрутки (синенькая такая), а что хотите вы?

[muster]

У меня другая тема (без прокрутки). Поэтому надо ее добавить. скрол вроде ставится, но т.к. высота не задана сайдбара, то полосы не видно. Пытаюсь сам поставить высоту, но так и не пойму общую логику, как высоту сайдбара сделать фиксированной высоты (равно содержимому). Заметил, что если убрать/добавить пункты в сайдбар, меняется мин. высота контейнера (на картинке 1575 px), т.е. его высота зависит от кол-ва пунктов меню.

[Plan]

Не понимаю))) т.е вы и скрин со своего сайта постеснялись выложить, а выложили с другого, где работает прокрутка?
Дайте уже ссылку, не мучайте

[muster]

Ссылку стесняюсь и боюсь (тема наполнена почти уже). Надо было показать, что хочу. Конечно я показал с другой темы, т.к. у меня то нет. Было бы у меня, зачем бы я вопросы задавал.

[Val_Ery]

если убрать/добавить пункты в сайдбар, меняется мин. высота контейнера (на картинке 1575 px), т.е. его высота зависит от кол-ва пунктов меню.

Возможно три варианта:
1. вы ограничиваете по высоте не тот элемент...
да, лучше использовать правило max-height: 200px; это не будет создавать полосу прокрутки там, где элементов в боковой панели мало
2. прописанные вами правила перезаписываются стилями темы
поэтому, добавлять свои собственные правила лучше не прямо в css-файл, а через Внешний вид - Настроить - Дополнительные стили
3. кэш
попробуйте отключить кэш в инспекторе (вкладка сеть) и обновить страницу; добавление стилей через "дополнительные стили" избавит от этой проблемы

P.S. Вы работаете с дочерней темой? Просто на ваших скриншотах есть некие явно сгенерённые кем-то классы. Если стесняетесь показать свою разработку, хотя бы укажите название изначальной темы, с которой работаете...

[muster]

Моя тема raindrops. Рассчитывал при выборе темы на то, что не понадобиться работать с кодом. Т.е. не надо будет заморачиваться дочерними темами, проблемами с обновлениями и пр. Но чем дальше в лес, тем больше дров. И сейчас я понимаю, что независимо от темы, все равно придется в коды все-таки вникать. А значит надо будет создать дочернюю тему и пытаться ее под себя кодом настроить. Но все равно я не понимаю, как именно установить высоту сайдбара. Какой строкой и в каком месте? Посмотрите тему, может поможет. 
Добавлено: 19-07-2020, 18:03:29

Подключил тему с прокруткой сайдбара Agency Ecommerce. Хотел код подсмотреть. В ней есть настройка (см. картинку). Хоть какую цифру ставь, все равно прокрутки нет.

[muster]

Тема решена

Доп. стили:
#nav_menu{
   max-height: 350px;
   overflow-y: scroll;
}

[иван sdf]

Вам нужно найти и изменить параметр max-height или overflow-y: auto для вашего сайдбара. Вы можете использовать CSS-код, например, .sidebar { max-height: 500px; overflow-y: auto; }

[kruzalex595]

Через CSS (рекомендуется)
Добавьте в Внешний вид → Настроить → Дополнительный CSS:

css
/* Для ограничения высоты меню с прокруткой */
.sidebar .widget_nav_menu,
.widget_nav_menu .menu,
.sidebar-menu-container {
    max-height: 400px; /* Настройте под свою нужную высоту */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Стилизация полосы прокрутки */
.sidebar .widget_nav_menu::-webkit-scrollbar,
.widget_nav_menu .menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar .widget_nav_menu::-webkit-scrollbar-track,
.widget_nav_menu .menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sidebar .widget_nav_menu::-webkit-scrollbar-thumb,
.widget_nav_menu .menu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.sidebar .widget_nav_menu::-webkit-scrollbar-thumb:hover,
.widget_nav_menu .menu::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

Post Merge: 11-11-2025, 23:18:32 Добрый день! Вы правильно думаете - нужно ограничивать высоту именно меню, а не всего сайдбара. Сейчас разберем несколько рабочих способов.

🔍 Сначала найдем правильный селектор
Быстрый способ определить классы:

Откройте сайт

Нажмите F12 (Developer Tools)

Кликните на меню в сайдбаре правой кнопкой → Inspect

Посмотрите классы элемента (обычно .menu, .widget_nav_menu)

🎯 Готовые CSS решения
Добавьте в Внешний вид → Настроить → Дополнительный CSS:

Вариант 1: Универсальный
css
/* Для всех меню в сайдбаре */
.sidebar .menu,
#secondary .menu,
.widget_nav_menu .menu {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}
Вариант 2: Более специфичный
css
/* Конкретно для виджета меню навигации */
.widget_nav_menu ul,
.widget_nav_menu .menu {
    max-height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
}
Вариант 3: С красивой полосой прокрутки
css
.widget_nav_menu .menu {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Стили для Chrome/Safari */
.widget_nav_menu .menu::-webkit-scrollbar {
    width: 6px;
}

.widget_nav_menu .menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.widget_nav_menu .menu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.widget_nav_menu .menu::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}