How to override applied CSS rules in media queries?

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>