Solution 1 :

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

.navbar-nav {
	overflow-y: scroll;

Solution 2 :

Just add navbar-nav-scroll class to the existing navbar-nav class, that will solve all scrolling issue.

Problem :

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>

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
} {
   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


Comment posted by Simone Rossaini

I try you website with my Samsung S8 and google dev, in all two dropbox menu work.


Leave a Reply

Your email address will not be published. Required fields are marked *