Bootstrap icon-bar not showing

Question

the icon-bar in the navbar menu of Bootstrap not showing when resizing the browser:

http://jsbin.com/ixAqinA/1/

   <section class="container">
    <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>
      <a href="/">
        brand
      </a>
    </div>
    </section>

you can see the JSBin example live: http://jsbin.com/ixAqinA/1/

Answer 1

You have to wrap it inside

<nav class="navbar navbar-default" role="navigation"></nav>

• Your code corrected: http://jsbin.com/ixAqinA/5/
• Example from Bootstrap documentation

Answer 2

I had a similar issue, but this solution did not work for me because of changes in Bootstrap.

For Bootstrap 3.1.1, I needed the following style to show the icon bars on a custom colored navbar that is fixed to the top (so .navbar-default doesn't work)

.navbar-toggle .icon-bar{ background-color: #fff;}

Just change #fff for the color you would like to show.

Answer 3

Bootstrap 4 doesn't use .icon-bar any more. There it has to be done like:

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

For more details you should look here or in the documentation of Bootstrap 4