My navigation div is not reappearing when the screen gets bigger

Question

Apologies for the long winded question but any help would be much appreciated!

I have a navigation div on a website that disappears when the screen gets smaller to be replaced by a menu button, using a media query. The menu button uses JavaScript to show and hide the menu.

This all works apart from one small bug that I can't figure out, it's a bit hard to explain so I'll bullet point it -

1) Open small browser window so button shows.
2) Open and close menu using button.
3) Maximise screen.
4) The button disappears (which it should) but the menu doesn't reappear.

You can see a live example here - http://andrewbruce.me

I'll put relevant code below -

var clicks = 0;

function decide(x) {
    if (clicks == 0) {
        document.getElementById("nav").style.visibility = "visible";
        document.getElementById("nav").style.opacity = "1";
        x.classList.toggle("change");
        clicks = 1;
    }

    else if (clicks == 1) {
        document.getElementById("nav").style.visibility = "hidden";
        document.getElementById("nav").style.opacity = "0";
        x.classList.toggle("change");
        clicks = 0;
    }
}

#nav {
height: 100%; 
width: 22%;
text-align: center;
box-shadow: 2px 2px 5px #888888;
visibility: visible;
opacity: 1;
transition: all .3s ease-in-out;
background-color: #1b1d1f;
float: left;
position: fixed;
z-index: 2;}

@media handheld, screen and (max-width: 1000px) {
#nav {width: 40%; visibility: hidden; opacity: 0;}
.menuButton {visibility: visible;}
}

<div class="menuButton" onclick="decide(this);">
  <div id = "bar1"></div>
  <div id = "bar2"></div>
  <div id = "bar3"></div>
</div>

Answer 1

Try this.

I hope helps.

  @media (min-width: 1000px){
   #nav{
   opacity:1!important;
   visibility: visible!important;
   }
 }