I want to alter the css in a Wordpress theme. I am adding the following custom css in style.css in Wordpress. However, the style I add does not show up on the website. I am overwriting:
@media screen and (max-width: 830px)
.masthead .top-bar, .masthead .hide-on-mobile {
display: none !important;
}
to
@media screen and (max-width: 830px)
.masthead .top-bar, .masthead .hide-on-mobile {
display: inline !important;
}
Right now the first !important is overriding your second I suppose. But you can override !important statements quite simple
Taken from: How to override !important?
Give the selector a higher specificity (adding an additional tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).
Some examples with a higher specificity:
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
Or add the same selector after the existing one:
td {height: 50px !important;}
Disclaimer: It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.
But, it's useful to know how to override it, if you sometimes have to.
