How to override applied CSS rules in media queries? - css

Question

I use jQuery to animate my page - a function called slideToggle(). I can view this in the debugger and see the styles applied to my <nav> element.
The problem I'm facing, is that after I call slideToggle ( a second time ) it sets display:none to <nav> as it correctly should.
However, If I expand the screen again, the menu does not re-appear in its normal state as it should.
I set it in the media query but it is ignored.
#media screen and (max-width: 1000px){
/* This does nothing but I want it to turn the display on.
*/
nav {
display: block;
}
}

Answer 1

To answer the question can I override inline-css? ... Yes, by using !important.
Your real question:
By adding !important to your media query when the screen is big again. see following snippet (run in full screen and make screen smaller/bigger)
(function(){
$('button').on('click', function(e){
$('#test').slideToggle();
});
})();
#media screen and (min-width: 1000px) {
ul {
height:50px;
background-color: red;
width: 100%;
}
li {
display: inline-block;
height: 50px;
line-height: 50px;
float:left;
margin-left: 50px;
}
#test {
display: block !important;
}
button {
display: none !important;
}
}
#media screen and (max-width: 1000px) {
ul {
background-color: red;
width: 100%;
}
li {
display: block;
height: 50px;
line-height: 50px;
}
#test {
display: none;
}
button {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
<ul>
<li>This</li>
<li>Is</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
<button >Toggle menu</button>

Answer 2

Media queries are irrelevant here. They don't affect the cascade at all.
Inline rules always trump rule-set rules unless the rule-set rule is !important and the inline rule is not.

Answer 3

In general, the most specific CSS selector will be applied to an element. The cascading order is defined as follows (highlight by me):
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the
associated selector matches the element in question and the target
medium matches the media list on all #media rules containing the
declaration and on all links on the path through which the style sheet
was reached.
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones.
Pseudo-elements and pseudo-classes are counted as normal elements and
classes, respectively.
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.
Declarations in imported style sheets are considered to be before any
declarations in the style sheet itself.
Furthermore, you can forcefully apply a style using the !important keyword. You should not use the declaration, however, unless it is absolutely necessary after all other avenues have been exhausted. I recommend reading this article if you want to learn more about the !important keyword, when to use it and why to avoid it.

Answer 4

You can add a class in the media query and call addClass in your function.
By the way
You set display: block; for nav when max-width: 1000px
It should be MIN-width if you want to display the nav when the screen widens.

Answer 5

this will work 100%;
#media screen and (min-width: 1001px){
/* This does nothing but I want it to turn the display on.
*/
nav {
display: static !important;
}
}