Change navbar color in twitter bootstrap 2.0.4

Question

Was wondering if anyone knew how to change the navbar color in bootstrap v2.0.4

I tried this solution it does not seem to work: navbar color in Twitter Bootstrap

Any other solutions? I have tried the customized bootstrap packages, but I am so far into development I can make a switch like that.

Code:

.navbar-inner {
  background-color: #2c2c2c; /* fallback color, place your own */

  /* Gradients for modern browsers, replace as you see fit */
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  background-repeat: repeat-x;

 /* IE8-9 gradient filter */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',    endColorstr='#222222', GradientType=0);}

How do you mean it doesn't seem to work? If you look in the devtools of your browser, does your styling get applied and then becomes overridden by some other code perhaps? — Christofer Eliasson, Jun 25 '12 at 20:16
wherever you are including the bootstrap.css and your own stylesheet that overrides the bootstrap, make sure your stylesheet is included last. — Rooster, Jun 25 '12 at 20:31
Appreciate both your comment, I had overridden the 'code'background-image but not the gradients. As soon as I overwrote those I was okay and got the color I wanted. Secondly I have made the change John has suggested — jacobronniegeorge, Jun 25 '12 at 20:31

score 65 · Accepted Answer · answered Jul 04 '12 at 16:20

The color of the navbar come from the .navbar-inner lines 3582 to 3589 in bootstrap.css (for the version 2.0.4)

.navbar-inner in boostrap.css

The css properties are applied in a specific order

background-color (recognised by all web browser)
vendor prefixes -moz, -ms, -webkit, -o (to serve specific web browser)
the standard (but not implemented yet)

Example of background-color override in boostrap.css with Chrome:

background-color:#ffffff; has been replaced with background-color:#eab92d directly into boostrap.css (it's not recommended but it's just to illustrate the point).

background-color: #EAB92D is applied first

-moz-linear-gradient and -ms-linear-gradient are ignored

-webkit-gradient cover background: #EAB92D(back to the default gradient)

-webkit-linear-gradient overrides -webkit-gradient

-o-linear-gradient and linear-gradient are ignored

.navbar-inner with backgroud-color replaced

.navbar-inner with backgroud-color replaced result

Change the color of .navbar-inner from colorzilla

You can easily create a cross browser gradient with colorzilla

Create a <style> tag in <head> after bootstrap.css is called.

Then copy the css generated by colorzilla in .navbar-inner {} inside the <style> tag.

.navbar-inner {
  background: #eab92d; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #eab92d 0%,#c79810 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
}

The css generated by colorzilla overrides all the css properties from boostrap.css as you can see below

.navbar-inner large

.navbar-inner small enter image description here

Changing '.navbar-inner' is not enough few other bits needs to be changed.

.navbar .btn-navbar (the button to open the menu when width<768px) share the same properties as .navbar-inner

.navbar-inner, .navbar .btn-navbar {
    background: #eab92d; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhYjkyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNzk4MTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #eab92d 0%, #c79810 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eab92d), color-stop(100%,#c79810)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eab92d 0%,#c79810 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eab92d 0%,#c79810 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-8 */
    }

.divider-vertical (the vertical separator) uses the same colors used in the gradient

.navbar .divider-vertical {
    background-color: #c79810;
    border-right: 1px solid #eab92d;
    }

.active (the highlight on the active page) is corresponding to the dark color of the gradient

.navbar .nav .active > a, .navbar .nav .active > a:hover {
    background-color: #c79810;
    }

the color of the link on the menu needs to be changed as well, in this case 75% from the fair color of the gradient to white.

.navbar .nav > li > a {
    color: #f9ed9d;
    }

And finally the color of the .brand , in this case 50% from the fair color of the gradient to white.

.navbar-fixed-top .brand {
    color: #634c08;color: #f4dc87;
    }

The :hover color of links has not been changed bu can be with:

.navbar .nav > li > a:hover {color:white;}

Same for the color of the active link

.navbar .nav .active > a, .navbar .nav .active > a:hover {color:white;}

.navbar-inner result large .navbar-inner result small

excellent answer! i was looking how to change the text colors and other and your post helped me alot. — Bogdan, Jan 08 '13 at 09:07
How can you change the color of the link to 75% of the fair color of the gradient to white? And how about the 50% for the .brand? I am using colorzilla site. — Daniel, Jan 10 '14 at 05:27

score 14 · Answer 2 · edited Jan 01 '17 at 07:14

One simple method (with the same result that got baptme) : I use it in rails for conditional layout, (with gem bootstrap-sass).

in your scss file, before importing bootstrap, define some variables:

$navbarBackground:                #c79810 ;
$navbarBackgroundHighlight:       #eab92d ;
$navbarText:                      #f9ed9d ;
$navbarLinkColor:                 #f9ed9d ;
$navbarSearchPlaceholderColor:    #EEC844 ;

@import 'bootstrap' ;

And got it :)

score 5 · Answer 3 · edited Nov 28 '12 at 14:18

5

You can also use the Twitter Bootstrap theme generator at http://stylebootstrap.info/ and easily customized your themes.

edited Nov 28 '12 at 14:18

microspino

7,693
3
48
49

answered Nov 27 '12 at 18:50

Matoeil

6,851
11
54
77

score 1 · Answer 4 · answered Mar 22 '13 at 09:50

1

If you only want to use the previous version of Bootsrap's dark look for navbars, you can add the .navbar-inverse class to the navbar element.

<div class="navbar navbar-inverse">

answered Mar 22 '13 at 09:50

Johann

186
2
8

score 0 · Answer 5 · answered Jul 04 '12 at 00:46

0

Take a look using firebug. You can click on the exact navbar in question and see exactly which css styles apply to it.

answered Jul 04 '12 at 00:46

darkAsPitch

1,855
4
23
35

score 0 · Answer 6 · answered Jan 26 '13 at 22:36

Extending @Traz super concise answer for LESS for people using twitter-bootstrap-rails gem

@navbarBackground:                #c79810 ;
@navbarBackgroundHighlight:       #eab92d ;
@navbarText:                      #f9ed9d ;
@navbarLinkColor:                 #f9ed9d ;
@navbarSearchPlaceholderColor:    #EEC844 ;

Change navbar color in twitter bootstrap 2.0.4

6 Answers6

Linked