unable to change color of navbar in bootstrap 3?

Question

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

Tried Using Important ?? – Nambi N Rajan Nov 02 '18 at 12:59 — Nambi N Rajan, Nov 02 '18 at 12:59

falsarella · Answer 1 · 2014-04-09T22:23:29.323

0

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

edited Apr 09 '14 at 22:23

answered Apr 09 '14 at 22:13

falsarella

12,217
9
69
115

sorry, that was typo in pasting here, but the color is not changed from navbar-inverse – brain storm Apr 09 '14 at 22:14
Also just having .navbar-www did not help either. I see in chrome that this background is set, but is not being seen on the screen – brain storm Apr 09 '14 at 22:16
In that case, I have edited my answer. Take a look and try :D – falsarella Apr 09 '14 at 22:25
I tried them. but did not help. however, removing `navbar-inverse` changes the background color, but the font color is also changed to default blue (which was white previously) – brain storm Apr 09 '14 at 22:32
That's very strage... Have you tried to clear the browser cache? – falsarella Apr 10 '14 at 00:20

score 0 · Answer 2 · answered Apr 09 '14 at 22:39

0

try adding style to anchor tag

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

answered Apr 09 '14 at 22:39

krozero

5,929
3
21
33

that will make only the links change color but the background is still black – brain storm Apr 09 '14 at 23:10

score 0 · Answer 3 · edited Jul 19 '16 at 19:24

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.

score 0 · Answer 4 · answered Sep 21 '16 at 19:44

0

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

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

answered Sep 21 '16 at 19:44

Tenz

535
2
7
27

unable to change color of navbar in bootstrap 3?

4 Answers4

Linked