Can't scroll a dropdown menu in a Bootstrap navbar

pblanco4 0
Viewed 24

I have a fairly simple home page that currently contains a navbar with two dropdown menus. One of menus contains a large number of entries but it doesn't allow me to scroll to the end of the list.

I created a fixed-top navbar with a navbar-brand, a home link and two dropdown menus. One of the menus is short with just 2 items and the other contains about 32 items.

Everything renders fine but when I open the larger of the two menus, it displays most of the items but will not allow me to scroll to the rest.

I expected the navbar to stay fixed to the top of the page while I could scroll all the way to the bottom of the large menu.

bootstrap-5 django html
1 Answers

This can occur because the height of your page is less than the height of the menu items. So when you click the menus, the extra menus are hidden and not scroll-able.

Try this :

html, body
{
    height: 100%;
}

or set the minimum height for the body to 100%

body {
  min-height: 100%;
}

if both doesn't work try to set a fixed height for dropdown-menu and make it scroll.

.dropdown-menu{
   max-height:300px;
   overflow-y: scroll;
}
Asad Ashraf0
Related