Menu
By using Twitter Bootstrap 3, I want to create an additional navbar for mobile.
In navbar I will put 2 toggle buttons in each side of bar. Left button will have classical "three bar" icon, and right button will have a different icon inside. I want right button to have ".glyphicon .glyphicon-comment" inside it. If the user clicks the button it will also toggle for second menu. I can toggle for the menu but icon can't be changed ?
I couldn't put any other icon inside right toggle button ? (I also need the "some link" text to be centered in navbar)
Fiddle: http://jsfiddle.net/mavent/WPfe3/2/
<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation" id="">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" 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 pull-right" data-toggle="collapse" data-target=".navbar-ex2-collapse"> <span class="sr-only">Toggle navigation</span>
<i class="icon-user"></i>
</button>
<a class="navbar-brand" style="text-align:center;" href="">Some link here centered</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<li class="active">
<a href="#">AAAA 1</a>
</li>
<li class="active">
<a href="#">AAAA 2</a>
</li>
<li class="active">
<a href="#">AAAA 3</a>
</li>
</div>
<div class="collapse navbar-collapse navbar-ex2-collapse">
<li class="active">
<a href="#">BBBB 1</a>
</li>
<li class="active">
<a href="#">BBBB 2</a>
</li>
<li class="active">
<a href="#">BBBB 3</a>
</li>
</div>
</nav>
820
If you work with sass version of bootstrap in _variables. scss you can find $navbar-inverse-toggler-bg or $navbar-light-toggler-bg where you can change the color and style of your toggle button. In html you have to use navbar-inverse or navbar-light depending on which version you want to use.
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".
You can achieve this by changing the icon span,
Instead of,
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Use like,
<span class="glyphicon glyphicon-play" style="color:#fff"></span>
Demo
157
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
