Until the navigation collapse

Try to resize the web page and you will see that for small viewports, the horizontal list placed in the navigation will stack vertically, as illustrated in the next screenshot. Fortunately, Bootstrap has the option to collapse the lists at the navigation bar. The procedure for doing this is pretty simple and we will do it now.

So, let's make the .nav-header collapses and create a toggle button to show or hide the list menu. Change the HTML to this:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="landing_page.html">Company name</a>
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false">
 <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 id="nav-menu" class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li><a href="#about">About</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
  </div>
</nav>

The new code is in bold. First, we added a <button> element to create our sandwich button (the one with three dashes). On data-target, we must add the element that is the collapse target, #nav-menu in our case.

Then, we must say which is the element to be collapsed in the small viewport, so for .navbar-right, we added the .collapse.navbar-collapse classes. The navigation bar should then appear like the one shown in the following screenshot. Hooray! Bootstrap has saved the day again!

Using different attachments

For this example, we fixed the navigation bar to the top of our web page, although we can use different attachments. For instance, we can attach the navigation bar to the bottom using the .navbar-fixed-bottom class.

The bar can also be static. For that, use the .navbar-static-* class, where the asterisk can mean top or bottom. If you are using the static navigation bars, you must place a container (static or fluid) right in the next level of the component:

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    …
  </div>
</nav>

Coloring the bar

You can also change the color of the navigation bar. Bootstrap version 3 offers an inverted set of colors. To do so, add the .navbar-inverse class to the <nav> element, as follows:

<nav class="navbar navbar-inverse">
  …
</nav>

In version 4, they added other color options. So if the background of your navigation bar has a dark color, add the .navbar-dark class to make the text and other elements white. If the background has a light color, use the .navbar-light class to get the opposite result.

For the background color, you can pass a class called .bg-*, where the asterisk means a set of colors from Bootstrap. These are default, primary, info, success, warning, or danger:

<nav class="navbar navbar-dark bg-danger">
  …
</nav>