CODEWITHSUNDEEP
csstwitter-bootstrap-3
Lembasts
Lembasts

Reputation: 113

Bootstrap CSS Background-color not working

I am using V3.3.6 of Bootstrap and I wanted the background-color of my Ņavbar to be a dark red. In addition to the standard Bootstrap CSS, I have my own css as shown below:


    .navbar-inverse {
      background-color: #9E1B34;
    }

    .navbar-inverse .navbar-nav > li > a,
    .navbar-inverse .navbar-brand {
      color: white;
    }
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus,
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus,
    .navbar-inverse .navbar-brand:hover,
    .navbar-inverse .navbar-brand:focus  {
      color: #9E1B34;
      background-color: white;
    }

The website is http://www.alkd.org.au

When hovering over each navbar item I get my correct styling of Red text and White background. But the background-color of the standard navbar is black, not dark red even though I have overridden the .navbar-inverse background-color. The browser developer tools shows that my css is the 'winning' one yet seems to be ignored. I cannot find anything in the developer tool that shows me where the black is coming from. I do have a javascript that adds the active class to the active page which sets the text color to red (which is working), but the background color should be white. Once again the developer tools shows that the active page background-color is white but it is being displayed as black. Where is that black coming from? and whats the best way to get rid of it please?

Upvotes: 0

Views: 9308

Answers (2)

Kocik
Kocik

Reputation: 504

The most simple solution:

.navbar-inverse {
    background: #9E1B34;
}

Your background-color was covered by background-image property that created black gradient.

Now, combined property background allows you to set new background color, while setting background-image to none.

Upvotes: 0

Guy
Guy

Reputation: 11305

The black color is actually coming from a gradient on the .navbar-inverse class. Adding backgound-image none will override this.

.navbar-inverse {
    background-color: #9E1B34;
    background-image: none;
}

This also allows you to remove the !important which makes the code more maintainable.

Upvotes: 5

Related Questions