I'm working on my very first webpages. The navigation bar consists of 5 sections/links (3 pages) - 1st page contains 3 links with ID's within one page + the are two linked simple pages. With two simple pages the hamburger menu works without any problem - it opens after clicking at hamburger, when I click on any section, the navigator closes automatically. The problem is when I click on the menu in the page, where the three ID's are. The navigation bar opens, the webside moves into the point where the ID is, however the navigation bar doesn't close. Please see below attached the code. Could you please help? thank you
let menu = document.querySelector(".menu")
let menuIcon = document.querySelector(".menu-icon")
menuIcon.addEventListener("click", function() {
let iconSrc = menuIcon.src
console.log(iconSrc);
let splitIconSrc = iconSrc.split("/")
console.log(splitIconSrc);
let imgName = splitIconSrc[splitIconSrc.length - 1]
if (imgName == "hamburger.png") {
menuIcon.src = "img/krizek.png"
menu.style.left = "0px"
} else {
menuIcon.src = "img/hamburger.png"
menu.style.left = "-120%"
}
})<nav>
<img class="menu-icon" src="img/hamburger.png" alt="">
<ul class="menu">
<li><a href="index.html#about-me">O mně</a></li>
<li><a href="index.html#offer">Nabídka</a></li>
<li><a href="instructions.html">Návody</a></li>
<li><a href="gallery.html">Galerie</a></li>
<li><a href="index.html#contact">Kontakt</a></li>
</ul>
</nav>