I'm using navbar with a dropdown menu (Bootstrap 3)
The issue: A scrollbar appears in the dropdown menu. (see picture below)

My "nav" element is relative position.
<nav class="navbar navbar-default clearfix" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#"></a>
</div>
<div class="collapse navbar-collapse navbar-main-collapse">
<ul class="main-menu user hidden-xs">
<li class="dropdown">
<a href="#" class="dropdown-toggle btn btn-xs btn-primary" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li class="divider"></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Does anyone know how to fix this issue?
Yes.. this is a known bug in Bootstrap 3.0.2 --
(https://github.com/twbs/bootstrap/issues/11243)
One workaround is to..
.navbar-collapse.in {
overflow-y: visible;
}
Demo: http://bootply.com/96924
Skelly's answer helped. Thank you. But since I was seeing a scrollbar during the collapsing activity, I needed to fix it like this:
.navbar-collapse.in, .navbar-collapse.collapsing {
overflow-y: visible;
}
Bootstrap applies the "collapsing" class as the menu collapses, then "in" once the collapse is complete. I hope this helps someone else.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With