Задать вопрос
@alexgoraynov

Как сделать прокрутку блока collapse в прилипающем меню?

Добрый день. Буду очень благодарен за помощь.

На сайте я использую стандартное навигационное меню bootstrap. Меню находится в header которое прилипает к экрану сверху через position: sticky.
Пунктов меню у меня достаточно много, поэтому к тегу nav применил navbar-expand-xs, да и вообще мне кажется гораздо удобнее, когда меню скрыто под кнопкой изначально. Нужно будет человеку - нажмет кнопку и найдет желаемое.
Проблема в том, что когда меню полностью раскрывается, то его часть уходит вниз за экран.
И я никак не могу добиться того, чтобы этот открывшийся блок меню можно было прокручивать вниз.
Когда раскрывается меню и его часть уходит вниз, то при попытке его прокрутить вниз крутится основной экран страницы, а видимая часть открывшегося меню так и остается прилипшей к экрану без визуальных изменений. Прокручиваться вниз блок меню начнет только после того, как основной экран упирается в конец.

Меню выглядит вот так:
<header class="main-header" id="menu-border">
    <div class="container"> 
        <nav class="navbar navbar-expand-xs navbar-light">
        <button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    	    	<p>Меню</p>
    	</button>
	<div class="collapse navbar-collapse" id="navbarNav">
        </div
       </nav>
</div>
</header>


Применял overflow: auto и к тегу nav и к блоку class="collapse navbar-collapse" id="navbarNav"
Без толку.

Подскажите пожалуйста, как можно решить проблему.
  • Вопрос задан
  • 258 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
mdss
@mdss
Чтобы заработало свойство overflow, необходимо ограничить максимальную высоту блока. Например:
#navbarNav {
  overflow: auto;
  max-height: 70vh; /*  под себя измените высоту */
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы