Bootstrap 3 Multiple Nav bar Menus -
i using bootstrap 3's example menu page site: http://getbootstrap.com/examples/jumbotron/
when shrink page menu @ top collapses single drop down list.
on page have 2 menues @ top left , right when shrink page don't 2 drop down menues.
i when shrink page 2 collapsed menues. possible?
try this: http://bootply.com/79216 add button (different) target align second menu right navbar-right
, add css reset float , display of navbars.
html
<nav class="navbar navbar-inverse" role="navigation"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">brand</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">link</a></li> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> </div> <div class="collapse navbar-collapse navbar-ex2-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li><a href="#">separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </nav>
css
.navbar-collapse:before, .navbar-collapse:after{display:inline; content:"";}
Comments
Post a Comment