unable to change color of navbar in bootstrap 3?

问题

I followed this post for customizing navbar. meanwhile I came across link which uses a simple navbar class. So I borrowed this from there

.navbar.navbar-www {
    background-color: #3E8956;
    border-color: #3E8956;
}

and the nav declared as follows in the above link:

<nav class="navbar navbar-fixed-top navbar-inverse navbar-www" role="navigation">

I had my custom.css loaded after bootstrap.css and my custom.css had the above css for navbar-www. even after that, my navbar is still in black color (navbar-inverse). but in the developer tools, I could see it is over-written to my custom.css background color for navbar-www.

I cannot figure out why this is happening and how to fix this?

EDIT: fixed a typo for the class .navbar .navbar-www

回答1:

The strength of the selector .navbar.navbar-www could be improved. Probably other browsers may understand that yours is more important than the other. Try being more specific on the selector and it won't be overwritten anymore!

For example:

.navbar.navbar-www.navbar-fixed-top
.navbar.navbar-www.navbar-inverse
.navbar.navbar-www.navbar-inverse.navbar-fixed-top
.someClass .navbar.navbar-www
nav.navbar.navbar-www

回答2:

try adding style to anchor tag

.navbar.navbar-www a{
  background-color: #3E8956;
  border-color: #3E8956;
}

回答3:

Write you custom CSS fill as follow

.navbar.navbar-www {
    background-image: linear-gradient(rgb(240, 16, 16) 0px, rgb(249, 18, 18) 100%);
    border-color: #3E8956;
}

your problem will be resolved.

you can refer the bootstrap official document, you can find that the default navbar background described as background-image, the priority of background-image and background-color, distinct the background-image is more powerful than background-color.

回答4:

Here is what I did, and it should work fine In your CSS file:

 .navbar.navbar-xxx{
   background-color: #000000;
   border-color: #c0392b;
 }

来源：https://stackoverflow.com/questions/22974873/unable-to-change-color-of-navbar-in-bootstrap-3

标签

css

twitter-bootstrap

navbar