To change navbar color in Twitter Bootstrap 3

Twitter Bootstrap is a popular front-end framework to create responsive websites with some popular JavaScript plugins inbuilt. Here is a workaround to change  navbar color in Twitter Bootstrap 3 instead of using the two basic navbar colors (light one / dark one) available.

To change the foreground and background color of navbars, you have to tackle with the following CSS rules specified in Bootstrap and put your own custom styles:

The default major color uses are as below:

  • Navbar Background: #F8F8F8
  • Navbar Border: #E7E7E7
  • Default Color: #777
  • Nav-brand Hover Color: #5E5E5E
  • Hover Color: #333
  • Active Background: #D5D5D5
  • Active Color: #555

Change navbar color in Twitter Bootstrap 3

There are SCSS, SASS and LESS code as well. But I am intended to use easiest solution to change navbar color in Twitter Bootstrap 3 and I found a script that can do the same, using TWBSColor – Generate your own Bootstrap navbar.

change navbar color bootstrap

This is a cool script that can generate your own Bootstrap navbar along with their SCSS, SASS and LESS code as well. Just click on the four rectangle boxes each and pick your color. You can copy the generated code & CSS and instead of overriding defaults, I would suggest you to copy rules into your custom CSS file and change the word ‘default‘ with ‘custom‘ into copied code. And at last use as below:

See the line #1 with ‘navbar-custom‘. This will allow you to use default navbar color and two navigation bar if you need so.

Like this Post? Share