Twitter Bootstrap 3 navbar toggle button with different icon

5
votes

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>
2
javascripthtmlcsstwitter-bootstrap
Something like this ? jsfiddle.net/WPfe3/5 – Vikas Ghodke

2 Answers

6
votes

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

5
votes

SEE THE DEMO HERE

You forget to add bootstrap-glyphicons.css in your jsfiddle demo. Then Replace this 

<i class="icon-user"></i>

With

 <i class="glyphicon glyphicon-comment" style="color:#fff"></i>

And then to get your link in center you need to remove the class navbar-brand from your a tag. And then wrap your link with div and then apply text-align:center and some padding to get the link in center.