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:
Twitter's Bootstrap 2.x navbar with dividers

Default Navbar in Twitter’s Bootstrap 3:

Twitter's Bootstrap 3 default navbar

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:
Navbar Twitter Boosstrap 3

An other example:
Purple navbar

3 Responses to “Custom Navbars in Twitter’s Bootstrap 3”

  1. hugo

    Thanks a lot mate !!! for some odd reason I wasn´t able to do this with a .navbar-custom class just like you did I guess I was missing something. CHEERS !!!

      • kas5986

        well that is great one also i used your wordpress theme for development as well the reason is the dorpdown color etc also need to be match with the nav i guess that is why i guess he/she didn’t try this how ever i use that on great thank for share helpful (y)


Leave a Reply

(will not be published)