CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3pseudo-class
godimedia
godimedia

Reputation: 999

Overwrite :after & : before classes content of Bootstrap

I want to overwrite the following CSS

  .navbar:before{
    display: table;
    content: " ";
  }

and remove any content possible in the before or after files. It's creating unnecessary space between my navbar and left panel. I tried giving that class an

content: none !important;

But it was not getting overwritten. Is there any way we can overwrite this? I am on the latest Bootsrap version.

Upvotes: 6

Views: 7603

Answers (2)

perfx
perfx

Reputation: 81

For overriding it this would be enough: 

.navbar:before {
    content: none !important;
}

If that doesn't help you can also try :

.navbar:before {
    display: none !important;
}

This would hide the element. But if you don't see the properties being overridden (check that with developer tools inspector) then i would search if those css rules are even added to the page.

Also it's possible that something else is causing the space.

Important would override even inline properties added with style="". Here are some reads about specificity:

https://css-tricks.com/specifics-on-css-specificity/ http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Upvotes: 7

MMachinegun
MMachinegun

Reputation: 3074

If content: none does not work try display: none.

And about it not getting overwritten, have you had a look in devtools? Clearly something is causing it to not get overwritten, would be good to have a direct look ;)

Upvotes: 0

Related Questions