Bootstrap CSS isn't being overridden by Custom css

Question

So I'm using bootstrap to make a navbar and used their example navbar as my foundation. I fiddled with the bootstrap file to make it so that the navbar will collapse at 995px instead of 768px. Now because of that my navbar's button stays at the left side until the window size is below 768px. I found that if I changed

@media (min-width: 768px) {
    .navbar-header {
        float: left;
    }
}

to

@media (min-width: 995px) {
    .navbar-header {
        float: left;
    }
}

then it works fine.

However I put

@media (min-width: 995px) {
    .navbar-header {
        float: left;
    }
}

into a custom.css and loaded it after bootstrap.css and no change occurred. My custom.css didn't override the boostrap.css. I would like to refrain from changing the bootstrap.css.

This is what the navbar looks like right now

This is what it should look like

Try adding !important on the styles of the overwritten file. — Dynelight
– Dynelight, Commented Jul 28, 2015 at 21:45
I keep reading adding !important is bad practice. So I would prefer an answer without using important unless that is the absolute only way to solve this problem. — isignisign
– isignisign, Commented Jul 28, 2015 at 21:47

MikaelC · Accepted Answer · 2015-07-28 22:25:02Z

1

So the quick fix is adding !important to your custom styles.

Another way to fix this is to make your custom styles more specific. I'm talking about the selector. You should give the element an Id and call that in your custom styles.

This makes your custom styles more specific, and therefore take precedence. You can also increase the specificity by indicating the parents in the selector.

header #yourNewId { ... } > #yourNewId{ ... } > .navbar-header{ ... }

edited Jul 28, 2015 at 22:25

answered Jul 28, 2015 at 22:00

MikaelC

4084 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

isignisign Over a year ago

Is there really no way to just override the Bootstrap CSS?

MikaelC Over a year ago

well you are overriding it, by being more specific with your selector. if you don't want to add an id you can try using parent .navbar-header{ ... } where parent is something like header or div

KZee · Accepted Answer · 2015-07-28 22:22:57Z

0

Always apply latest rule with equal specificity selectors. First, if not yet, place custom.css after bootstrap.css.

Then check media queries. If you just add

@media (min-width: 995px) {
    .navbar-header {
        float: left;
    }
}

to custom, it can't override it between 768 and 994 in bootstrap.

@media (min-width: 768px) {
    .navbar-header {
        float: left;
    }
}

Use something like it (change it to what you want):

@media (min-width: 768px) {
    .navbar-header {
        float: none;
    }
}
@media (min-width: 995px) {
    .navbar-header {
        float: left;
    }
}

answered Jul 28, 2015 at 22:22

KZee

4464 silver badges11 bronze badges

Comments

Julián Abal · Accepted Answer · 2015-07-28 23:56:47Z

0

The element is always floating left, so you won't be seeing any change. Never.

answered Jul 28, 2015 at 23:56

Julián Abal

457 bronze badges

Collectives™ on Stack Overflow

Bootstrap CSS isn't being overridden by Custom css

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related