Bootstrap navbar: nothing is displayed on smaller devices

Updated 2022

The Bootstrap 5 Navbar also requires navbar-light or navbar-dark to make the hamburger display.

Original Answer

It’s there but you’re not seeing because there is no background-color..

Use the navbar-default navbar-light or navbar-dark class:

<nav id="navbar-primary" class="navbar navbar-light bg-light" role="navigation">

or, add a background color:

#navbar-primary .navbar-nav { 
   background: #ededed;
}

or, darken the toggler:

.navbar-toggle .icon-bar {
    background-color: rgb(136, 136, 136);
}

https://codeply.com/go/QGDVIsAeda

Update for Bootstrap 4.0.0

navbar-default is gone. Now use navbar-light bg-light of for a light colored navbar, or navbar-dark bg-dark for a dark colored navbar.


Also see: How can I change the Bootstrap 4 navbar button icon color?

Leave a Comment