Today, I encountered an issue with Bootstrap while using a horizontal dropdown menu. It seems that the menu won't scroll with my navbar, and the culprit appears to be this particular CSS class:
.dropdown-menu {
width: 100%;
position: fixed;
top:210px;
z-index: 1000;
display: none;
float: left;
text-align:center;
}
However, removing or modifying the position:fixed property causes my dropdown menu to change back to a vertical alignment...
HTML
<div class="logo"><a href="#"><img src="img/logo.jpg" alt="logo"></a></div>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">mmenu1</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">mmenu2</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">smenu1</a></li>
<li><a href="#">smenu2</a></li>
<li><a href="#">smenu3</a></li>
<li><a href="#">smenu4</a></li>
<li><a href="#">smenu5</a></li>
<li><a href="#">smenu6</a></li>
</ul>
</li>
<li><a href="#">mmenu3</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
.logo{
text-align:center;
}
.navbar .navbar-nav {
font-size:1.9em;
font-family:verdana;
display: inline-block;
float: none;
}
.navbar-inverse .nav > li{
display:block;
}
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-inverse .nav > li{
width:170px;
display:block;
}
.dropdown-menu {
width: 100%;
position: fixed;
top:210px;
z-index: 1000;
display: none;
float: left;
text-align:center;
}
.dropdown-menu li {
display:inline-block;
}
Check out the code in action on Bootply: http://www.bootply.com/cmjcUyHRTw
Any suggestions on how to solve this issue?