Bootstrap navbar: nothing is displayed on smaller devices

Question

This nav bar with logo image in the middle works really well on larger screens but on smaller screens, everything disappears including logo image (and the hamburger fails to

Answer 1

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://www.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: Bootstrap 4 Change Hamburger Toggler Color