How can I close my hamburger menu when clicking a link for one page navigation? The menu is functioning properly, but I need a way to close it. Unfortunately, I have limited knowledge of JS.
I only have the HTML and CSS for this:
HTML in index.html file
<nav>
<div id="menuToggle">
<input type="checkbox"/>
<span></span>
<span></span>
<span></span>
<ul id="menu" class="navbar-collapse">
<li><a href="#1">Go to 1</a></li>
<li><a href="#2">Go to 2</a></li>
<li><a href="#3">Go to 3</a></li>
</ul>
</div>
</nav>
CSS in style.css file
*{
margin:0;
padding:0;
}
nav{
position:fixed;
z-index: 99999;
}
a{
text-decoration: none;
font-family: 'Lato', sans-serif;
color: #000000;
transition: color 0.3s ease;
}
a:hover{
color: #999999;
}
#menuToggle{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
... (CSS continued as original) ...
@media only screen and (max-width:480px) {
#menuToggle input {
top: 2px;
left: -5px;
}
}
Any assistance on how to close the hamburger menu would be greatly appreciated!