CODEWITHSUNDEEP
htmlcssbootstrap-4menutoggle
user13570702
user13570702

Reputation:

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

Upvotes: 2

Views: 5848

Answers (2)

Avdhoot kadam
Avdhoot kadam

Reputation: 329

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

Upvotes: 4

user13570702
user13570702

Reputation:

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

Upvotes: 3

Related Questions