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.
The steps here are similar to the Getting ready section of the Making custom buttons recipe.
Download and unzip the source files into your working directory from http://getbootstrap.com/getting-started/#download.
Open the
less/variables.less
file and look up the variables starting with@navbar-inverse
.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 theless/bootstrap.less
file.Then, recompile Bootstrap...