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 be displayed) Does anyone know a fix for this issue?

Here's the link: http://codepen.io/davidcochran/pen/Fkwys

#navbar-primary .navbar-nav {
  width: 100%;
  text-align: center;
}
#navbar-primary .navbar-nav > li {
  display: inline-block;
  float: none;
}
#navbar-primary .navbar-nav > li > a {
  padding-left: 30px;
  padding-right: 30px;
}

<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-primary-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->

You need to add **navbar-default** or **navbar-inverse** or style it yourself since you're only using .navbar. — vanburen, Feb 12 '17 at 14:55
Possible duplicate of [Bootstrap Menu Collapse working but isn't showing icons](http://stackoverflow.com/questions/38407131/bootstrap-menu-collapse-working-but-isnt-showing-icons) — vanburen, Feb 12 '17 at 14:59
When I clicked on the navbar-toggle button (it was invisible, but it was there), the navbar showed. — yaakov, Feb 12 '17 at 16:53

Carol Skelly · Answer 1 · 2022-02-15T14:53:15.350

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?

adding `navbar-default` or `navbar-light` works because they add multiple styles to main and children elements. But adding a simple background color to the main block is not enough to handle all children elements behavior. — Ali Sheikhpour, Dec 03 '19 at 21:51

score 0 · Answer 2 · answered May 14 '23 at 15:17

For those landing on this page on stack overflow who are using bootstrap with Blazor Webassembly, this is for you. This problem was driving me crazy, but I finally figured it out.

From a wide screen, the navbar would be displayed, and then while making the screen more narrow, the hamburger menu button would display, but then making the screen even more narrow, the hamburger menu button would disappear.

The reason this is happening is that when I created the Blazor Webassembly project template using Visual Studio. Part of the template is the MainLayout.razor file and the MainLayout.razor.css file. Included in the MainLayout.razor.css file is a media query that hides the menu when the width is below a certain breakpoint.

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }
}

I removed that query, and everything works great now.

No it doesn't. If someone's on a phone, they aren't going to be happy that a huge amount of the page is taken up with a permanent menu system. — Bennyboy1973, May 14 '23 at 16:32
The problem isn't the display of the menu. It is that there was no hamburger menu button. So the user is stuck without a way to navigate. As a developer, you can add or remove menu items, or whatever you need to do to the collapsed menu, but at the very least, you need to present a hamburger menu button. — David.Warwick, May 15 '23 at 15:55

Bootstrap navbar: nothing is displayed on smaller devices

2 Answers2

Linked

Related