Bootstrap CSS isn't being overridden by Custom css

isignisign Published at Dev

isignisign

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;
    }
}

@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

GoldenBeet

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{ ... }

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-20

Comments

0 comments

From Dev

Related Related

Article

Bootstrap CSS isn't being overridden by Custom css

Bootstrap CSS isn't being overridden by Custom css

custom css being overridden by bootstrap css

I can't understand why my bootstrap custom CSS is being overridden

CSS rule not being overridden

Bootstrap CSS is not getting overridden?

Why isn't this nested css style being applied?

My CSS file in Github isn't being used by the HTML file

CSS isn't working?

Custom CSS won't override default bootstrap css

Custom CSS for Bootstrap not working

CSS menu isn't centered

CSS isn't formatting ActionLinks

jQuery isn't modifying CSS

Why isn't my css being applied to my checkbox when checked, but only when rendered by razor?

Custom MessageListener to DefaultMessageListenerContainer being overridden

Custom Link Color Is Being Overridden

Custom Bootstrap carousel with thumbnails isn't working

Custom Bootstrap carousel with thumbnails isn't working

I can't edit my custom.css in a bootstrap project

Css class is overridden by jQuery

Using custom PHP module, why isn't $_POST being populated?

Using Bootstrap CSS along with Custom CSS

How to use custom css with bootstrap css

Using Bootstrap CSS along with Custom CSS

custom css cannot override bootstrap css

Creating a custom checkbox with CSS & Bootstrap

Custom CSS breaks bootstrap modal

CSS :first-of-type isn't working

JavaFX CSS URL isn't loading

Why isn't my css getting minified?