Making custom navigation bars

The navigation bar, or navbar for short, is an important component used in many Bootstrap projects. In this recipe, you will learn how to modify the inverse navbar by leveraging Less. By default, Bootstrap contains two navbar styles, the default and inverse styles.

Getting ready

The steps here are similar to the Getting ready section of the Making custom buttons recipe.

How to do it...

1. Download and unzip the source files into your working directory from http://getbootstrap.com/getting-started/#download.
2. Open the less/variables.less file and look up the variables starting with @navbar-inverse.
3. Change the variables starting with @navbar-inverse according to the following:

   @navbar-inverse-color:                     black;
   @navbar-inverse-bg:                         yellow;
   @navbar-inverse-border:                   darkgreen;

   Instead of editing less/variables.less, you can also write down the variables at the end of the less/bootstrap.less file.

4. Then, recompile Bootstrap...