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

Question

[alexgoraynov]

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

На сайте я использую стандартное навигационное меню 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"
Без толку.

Подскажите пожалуйста, как можно решить проблему.

Answer 1

[mdss]

Чтобы заработало свойство overflow, необходимо ограничить максимальную высоту блока. Например:

#navbarNav {
  overflow: auto;
  max-height: 70vh; /*  под себя измените высоту */
}

Comments

[alexgoraynov]

Спасибо, попробую.
А есть какой нибудь вообще иной вариант сделать так, чтобы при развернутом меню при прокрутке экрана сначала прокручивалось меню, а затем только основной экран страницы, а не на оборот?