Change navbar color in Twitter Bootstrap

Question

How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?

Answer 1

tl;dr - TWBSColor - Generate your own Bootstrap navbar

Version notes: - Online tool: Bootstrap 3.3.2+ / 4.0.0+ - This answer: Bootstrap 3.0.x

Available navbars

You've got two basic navbars:

<!-- A light one --> <nav class="navbar navbar-default" role="navigation"></nav> <!-- A dark one --> <nav class="navbar navbar-inverse" role="navigation"></nav> 

Default color usage

Here are the main colors and their usage:

• #F8F8F8: navbar background
• #E7E7E7: navbar border
• #777: default color
• #333: hover color (#5E5E5E for .nav-brand)
• #555: active color
• #D5D5D5: active background

Default style

If you want to put some custom style, here's the CSS you need to change:

/* navbar */ .navbar-default {     background-color: #F8F8F8;     border-color: #E7E7E7; } /* Title */ .navbar-default .navbar-brand {     color: #777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {     color: #5E5E5E; } /* Link */ .navbar-default .navbar-nav > li > a {     color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {     color: #333; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {     color: #555;     background-color: #E7E7E7; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {     color: #555;     background-color: #D5D5D5; } /* Caret */ .navbar-default .navbar-nav > .dropdown > a .caret {     border-top-color: #777;     border-bottom-color: #777; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret {     border-top-color: #333;     border-bottom-color: #333; } .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret {     border-top-color: #555;     border-bottom-color: #555; } /* Mobile version */ .navbar-default .navbar-toggle {     border-color: #DDD; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {     background-color: #DDD; } .navbar-default .navbar-toggle .icon-bar {     background-color: #CCC; } @media (max-width: 767px) {     .navbar-default .navbar-nav .open .dropdown-menu > li > a {         color: #777;     }     .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,     .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {           color: #333;     } } 

Custom colored navbar examples

Here are four examples of a custom colored navbar:

And the SCSS code:

$bgDefault   : #e74c3c; $bgHighlight : #c0392b; $colDefault  : #ecf0f1; $colHighlight: #ffbbbc; .navbar-default {   background-color: $bgDefault;   border-color: $bgHighlight;   .navbar-brand {     color: $colDefault;     &:hover, &:focus {       color: $colHighlight; }}   .navbar-text {     color: $colDefault; }   .navbar-nav {     > li {       > a {         color: $colDefault;         &:hover,  &:focus {           color: $colHighlight; }}}     > .active {       > a, > a:hover, > a:focus {         color: $colHighlight;         background-color: $bgHighlight; }}     > .open {       > a, > a:hover, > a:focus {         color: $colHighlight;         background-color: $bgHighlight; }}}   .navbar-toggle {     border-color: $bgHighlight;     &:hover, &:focus {       background-color: $bgHighlight; }     .icon-bar {       background-color: $colDefault; }}   .navbar-collapse,   .navbar-form {     border-color: $colDefault; }   .navbar-link {     color: $colDefault;     &:hover {       color: $colHighlight; }}} @media (max-width: 767px) {   .navbar-default .navbar-nav .open .dropdown-menu {     > li > a {       color: $colDefault;       &:hover, &:focus {         color: $colHighlight; }}     > .active {       > a, > a:hover, > a:focus, {         color: $colHighlight;         background-color: $bgHighlight; }}} } 

And finally, a little gift

I've just made a script which will allow you to generate your theme: TWBSColor - Generate your own Bootstrap navbar

[Update]: TWBSColor now generates SCSS/SASS/Less/CSS code.
[Update]: From now, you can use Less as the default language provided by TWBSColor
[Update]: TWBSColor now supports drop down menus colorization
[Update]: TWBSColor now allows to choose your version (Bootstrap 4 support added)