Custom Navbars in Twitter’s Bootstrap 3

Update: Also read Adding a background gradient to Bootstrap’s navbar with Less

Everyone knows the navbars for navigation from Twitter’s Bootstrap 2. In version 3 the structure has been changed a little, also see Twitter’s Bootstrap 3 RC2 (important changes). The navbar intends to be the main navigation on a website. When using more navbars on the same page you will have to set the z-index manually. Twitter’s Bootstrap 3 add accessibility to the navbar by adding a direct link with a special sr-only class. This sr-only class is visible in screen readers only.

Twitter’s Bootstrap 3 provides four types of navbars. The default navbar, a static navbar on the top of the document and navbar fixed to top or bottom of the document. See Navbar Docs for some example code to add a nav-tag with navbar to your website. To style your navbar you need to add the navbar-default class always. Of cource you could use a custom class or the navbar-inverse class too.

The best way to create a custom navbar (class) will be changing the Less variables and (re)compile your own version of Bootstrap’s CSS. See also: Change navbar color in Twitter Bootstrap 3

The look of the (default) navbar has been changed with Twitter’s Bootstrap 3. Gradients of the background are dropped also the dividers between links seems to miss.
Default Navbar with dividers in Twitter’s Bootstrap 2.x:

Default Navbar in Twitter’s Bootstrap 3:

I also create a custom Navbar generator for those who don’t want to compile the CSS. This generator has the option to add a background gradient and borders to your navbar. The borders can be used instead of the former dividers.

Navbar generated with the navbar generator:

An other example: