I am in the process of designing a responsive website that features a collapsible navigation bar specifically for small screens.
However, I encountered an issue where the nav bar disappears when I resize the screen to a larger size after toggling the menu on and off. Although this problem may only affect a small group who frequently adjust their browser window size and interact with the menu option.
I feel like there is some logical error that I am overlooking, but I just can't seem to pinpoint it.
Below is the code snippets:
<nav id="mainNav">
<img id="menu" src="menu.png" alt="menu icon" width="50" />
<ul id="slide">
<li><a href="#news">News</a></li>
<li><a href="#calendar">Calendar</a></li>
<li><a href="#about">About</a></li>
<li><a href="#sponsors">Sponsors</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
CSS:
#mainNav {
background-color: #333;
width: 100%;
z-index: 500;
}
#menu {
display: none;
}
@media screen and (max-width: 500px) {
#menu {
display: block;
}
#slide {
display: none;
}
jQuery:
$(function(){
"use strict";
$("#menu").click(function(){
if ($("#slide").css("display") === "block") {
$("#slide").css({ "display": "none" });
}
else if($("#slide").css("display") === "none") {
$("#slide").css({ "display": "block" });
}
}
);
});