Bootstrap menu button not working for you?

There’s a couple things you should know about the bootstrap menu icon, if it’s not working for you chances are one of these things is off.

In order to get it to show up, you will need to have it set in the appropriate tags. It needs to be sitting in a “navbar” class, followed by a “btn-navbar” class. In my example below, I’ve got a div called “navbar” and a button tag called “btn-navbar”. Once you have your structure nested properly, you’ll notice the css triggering from your bootstrap.css file.

<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <button type="button" class="btn btn-navbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
</div>

If your menu button isn’t showing up at all, chances are because bootstrap is hiding it. I think the original purpose of this button was to display a condensed navigation menu on smaller screens and mobile devices… so it only shows when the viewing area is small, other times, it is hidden. Now that people want to use this menu on their full-size websites, we have to fight with bootstrap, just a little bit.

Add this to your CSS overrides:

.navbar .btn-navbar {
     display: inline-block;
}

If this blog was helpful, let me know on Twitter.