external CSS file can't get class

Question

So I have this navbar:

<nav class="navbar navbar-default" style="background: black; margin-bottom: 0;">

And it's working fine. However when I'm trying to change styles in external CSS file instead of inline:

.navbar-default {
background: black; 
margin-bottom: 0;
}

They are not working at all. CSS file is working fine since I checked and bg pictures are changing. I have problem only with navbar and can't figure it out. According to this: Change navbar color in Twitter Bootstrap 3 I'm doing everything fine. It's first time I'm having this issue. Working with bootstrap if anyone is wondering :)

Any help guys? I dont want to use inline css.

Isn't the regular bootstrap css overwriting yours? Try adding !important or switch the order files are being loaded — Robbin van der Jagt, Sep 14 '16 at 12:52
try using nav.navbar-default to be more specific or even if that does not solves it then try using property with `!important` like `background: black;` but be careful using important will limit you from changing later on — Atal Kishore, Sep 14 '16 at 12:52

Hitesh Misro · Answer 1 · 2016-09-14T12:59:10.523

1

You need to override the Bootstrap classes, Use !important to get it work

.navbar-default {
    background: black !important; 
    margin-bottom: 0 !important;
}

Note: If you use !important all other rules used in your CSS cannot override this declaration.

edited Sep 14 '16 at 12:59

answered Sep 14 '16 at 12:52

Hitesh Misro

3,397
1
21
50

score 0 · Answer 2 · answered Sep 14 '16 at 12:54

0

Chances are your styles are being overridden as these styles are being set elsewhere. The C in css stands for cascading. See the cascading order section of this page

The easy option is to simply include your stylesheet after the bootstrap one.

Of course you can override this precedence by adding !important to the end of your style rules but this breaks some of the functionality of CSS and can become difficult to maintain.

answered Sep 14 '16 at 12:54

hairmot

2,975
1
13
26

included bootstrap css before mine and it fixed most of the problems, thanks! – Sep 14 '16 at 15:30

score 0 · Answer 3 · answered Sep 14 '16 at 12:57

0

I think default bootstrap navbar style is applying so try !important in front of property value.

.navbar-default {
background: black !important; 
margin-bottom: 0 !important;
}

answered Sep 14 '16 at 12:57

Kumar

270
1
4
17

score 0 · Answer 4 · answered Sep 14 '16 at 13:04

I have faced same problem and after searching alot i have found that as navbar-default is default class of bootstrap and its not overloaded by external css file.You can use !important property of css that will help you to load external css file when there default class are overloaded.

.navbar-default {
    background: black !important; 
    margin-bottom: 0 !important;
}

external CSS file can't get class

4 Answers4