Menu
In bootstrap I want to have two navbars below each other.
My idea:
Navbar 1 has a brand: main menu.
Navbar 2 (below navbar1) has a brand called: sub menu.
When the user looks at the site on his mobile phone he/she sees two collapsible navbars. The user can now choose which navbar to open. The menu or the sub menu.
I just copied the standard code on the bootstrap website: http://getbootstrap.com/components/#navbar
Strange thing is. When i make my browser small. Two collapsed navbars appear. "Main-menu" and "sub-menu". When I click on the button behind main menu the main menu appears. Just like it should. But when I press the sub-menu (uncollapse) button. The MAIN-MENU opens again. Not the sub menu.
I just used the standard navbar code from the bootstrap website in the link pasted those beneath each other and changed the brand names.
HERE is the bootply: http://bootply.com/101690 Test it on mobile and see what happens in the navbars.
835
Wrap both #nabar-mid-collapse and #navbar-rt-collapse in a div with class row-fluid , and apply class col-xs-4 (*or any respective . col class according to the width you need for each item *) to both of them.
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" . Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse" , followed by an id that matches the data-target of the button: "thetarget".
Two navbars are placed one after the other. The first navbar has a dark background and the navigation links are left-aligned whereas the “Register” and “Logout” buttons are right-aligned. The first navbar also consists of a dropdown menu that has links to several sections of the website.
The navbar-collapse refers to the menu that is in the mobile view with the navbar (contains links, and toggle-friendly content). They are in the bootstrap CSS (see here). See this for a full rundown of how the navbar and collapse work together. Follow this answer to receive notifications.
You use the same id value for both navbar, change the id for the second navbar and the corresponding data-target value:
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<a class="navbar-brand" href="#">MAIN menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">MAIN menu link1</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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="#">Sub menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Sub menu link1</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
Working example
195
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
