Style of Twitter's Bootstrap 3 navbar

Question

Howto change the styles of navbars in Twitter's Bootstrap 3 using Less or css? Using different styles as provide by the navbar-default and navbar-inverse classes.

Solution

Just like buttons and panel a navbar will have two classes (see: https://github.com/twbs/bootstrap/issues/10332). The first class (.navbar) will set the structure. The second class will set the styling. By default there will be two classes for styling: .navbar-default and .navbar-inverse. To change the style of your navbar you have to change the styles of these styling classes. The best way to do this is using Less and recompile Bootstrap.

Using Less

The variables for .navbar-default and .navbar-inverse are set in variables.less and used by navbar.less. To define a custom navbar style you could modify the variable for .navbar-default or .navbar-inverse and reuse this classes. If you don't want to change the original code. Create an customnavbar.less file (don't forget ti import this in bootstrap.less) and copy the .navbar-default part from navbar.less to this file. Rename and set the variables. B.e. see here: Change twitter bootstrap 3.0 navbar class background color in less to set the background to blue.

Using CSS

Define your css just like .navbar-default. To change the style. B.e. for <nav class"navbar navbar-custom"> and set background to blue;

.navbar-custom { background-color: #0000FF;}

For more styles and easy styling see: http://twitterbootstrap3navbars.w3masters.nl/