Search code examples
htmlcssbootstrap-4menutoggle

bootstrap mobile menu not scrolling instead the background is scrolling

i have a website done in bootstrap, the menu is working fine in desktop

<button type="button" class="dropdown-toggle pull-left" data-toggle="dropdown" data-target="#navbar-menu" aria-expanded="true">
<i class="fa fa-bars"></i><span style="font-size: 10px;width:100%;float: left;"><b>menu</b></span>
</button>

now when i loading it mobile, and open the menu, its not scrolling so i am not able to see the options in the dropdown, instead the background is scrolling, i searched and saw an answer in google like below:

.navbar-nav {
  height: 150vh; // <-- This will fix the collapse animation
}

.navbar-collapse.in {
   overflow-x: hidden;
   padding-right: 17px; // <-- Hide scroll bar, but still being able to scroll
}

@media (min-width: 768px) {
    .navbar-nav {
        height: auto;
    }
}

but still the menu is not scrolling and the background is scrolling. can anyone please tell me what could be wrong here, this is my live url enter link description here

thanks in advance

Solution

  • i finally got a fix for this, i gave hieght for the menu and gave overflow scroll

    .navbar-nav {
  
	max-height:400px;
	overflow-y: scroll;
}