Question

I’ve got some CSS and media queries which hide and show my navigation:

So by default the navigation is:

nav {
  display: inline;
}

Then using media query I hide it:

@media only screen and (min-width: 480px) and (max-width: 767px) {
  nav {
    display: none;
  }
}

All works perfectly well, I then have some JavaScript hooked up to a button to show and hide the navigation when the media query is in effect.

However when I resize the browser back to full screen, larger than 767px the navigation does not reappear. How can I get the navigation to appear for desktop users?

Answer 1

You can make the js add a class to the nav and use !important to overwrite the media query statement…

nav {
  display: inline;
}
.force_display{
    display:inline !important;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  nav {
    display: none;
  }
}

just add force_display class in the js function (assuming you’re using jquery)…

$('#button').on('click', function(){
    $('nav').toggleClass('force_display');
});