Overriding Bootstrap Nav Background-color

I am trying to override the default Twitter Bootstrap Nav by having a main.css (see below) override the nav classes but changes are not being applied. Here is my index.html

Solution 1:

The problem is that the background is actually a linear-gradient, not a colour. Use the none value for the background-image property and then specify the background-color. You can also see from my fiddle that its not a specificity issue:

.navbar-inverse.navbar-inner {
background-image: none;
background-color: #1f5b73;
}

http://jsfiddle.net/MgcDU/5290/

Solution 2:

Depending on how you're using bootstrap (I use rails), you can customize the colors with the less variables listed on the customize section of the twitter Bootstrap Website.

Example:

@navbarBackground: #222;

@navbarBackgroundHighlight: #999;

Share