Andrew Bruce Andrew Bruce - 8 days ago 6
CSS Question

My navigation div is not reappearing when the screen gets bigger

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 -

Button HTML -

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


Navigation CSS -

#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 query CSS -

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


JavaScript -

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;
}
}

Answer

Try this.

I hope helps.

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