Hamburger menu doesn't close after click on anchor tag

Question

After clicking on some anchor item in the menu I want to be able to close the menu, but it doesn't work. The remove method in javascript is not working for some reason. If I go through pages the menu closes itself but not on the index page and it stays open. I'm still learning Javascript so bear with me. Here's the additional CSS

 const netflix_open_btn = document.querySelector('.netflix-open-btn'); const netflix_close_btn = document.querySelector('.netflix-close-btn'); const netflix_nav = document.querySelectorAll('.netflix-nav'); netflix_open_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') }); }); netflix_close_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') }); });

 .netflix-text { text-transform: uppercase; } .netflix-list li a:hover{ color: #d6aa55; } .netflix-nav-btn { border: 0; background: transparent; cursor: pointer; font-size: 20px; z-index: 10; } .netflix-open-btn { position: fixed; top: 30px; left: 10px; z-index: 10; } .netflix-nav { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform .3s ease-in-out; z-index: 10; } .netflix-nav.visible { transform: translateX(0); } .netflix-nav-black { background-color: black; width: 60%; max-width: 480px; min-width: 320px; transition-delay: .4s; } .netflix-nav-black.visible { transition-delay: 0s; } .netflix-nav-red { background-color: rgb(214, 170, 85); transition-delay: .2s; width: 95%; } .netflix-nav-red.visible { transition-delay: .2s; } .netflix-nav-white { background-color: #fff; padding: 40px; position: relative; transition-delay: 0s; width: 95%; } .netflix-nav-white.visible { transition-delay: .4s; } .netflix-close-btn { opacity: 0.3; position: absolute; top: 40px; right: 30px; } .netflix-logo { width: 245px; } @media (max-width:768px){ .netflix-logo{ width: 197px; } } .netflix-list { list-style-type: none; padding: 0; } .netflix-list li { margin: 20px 0; } .netflix-list li a { color: rgb(34, 31, 31); font-size: 19px; text-decoration: none; text-transform: uppercase; } .netflix-list ul { list-style-type: none; padding-left: 20px; }

 <button class="netflix-nav-btn netflix-open-btn"> <i class="fas fa-bars fa-2x"></i> </button> <div class="netflix-nav netflix-nav-black"> <div class="netflix-nav netflix-nav-red"> <div class="netflix-nav netflix-nav-white"> <button class="netflix-nav-btn netflix-close-btn"> <i class="fas fa-times"></i> </button> <img class="netflix-logo" src="images/GOLD.png" alt="Logo" /> <ul class="netflix-list"> <li><a href="index-en.php" class="gold">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li> <ul> <li><a href="tattoo-en.html">Tattoo</a></li> <li><a href="beauty-en.html">Beauty</a></li> <li><a href="piercing-en.html">Piercing</a></li> </ul> </li> <li><a href="#contact">Contact</a></li> <li> <a href="index.php">Danish</a><img src="/images//denmark.svg" alt="danish-flag" class="flag" /> </li> </ul> </div> </div> </div>

Answer 1

for that you will have to create a function which you can call every time you click a link!

 const netflix_open_btn = document.querySelector(".netflix-open-btn"); const netflix_nav = document.querySelectorAll(".netflix-nav"); netflix_open_btn.addEventListener("click", () => { netflix_nav.forEach(nav_el => { nav_el.classList.add("visible"); }); }); function closeTab() { netflix_nav.forEach(nav_el => { nav_el.classList.remove("visible"); }); }

 .netflix-text { text-transform: uppercase; } .netflix-list li a:hover { color: #d6aa55; } .netflix-nav-btn { border: 0; background: transparent; cursor: pointer; font-size: 20px; z-index: 10; } .netflix-open-btn { position: fixed; top: 30px; left: 10px; z-index: 10; } .netflix-nav { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: 10; } .netflix-nav.visible { transform: translateX(0); } .netflix-nav-black { background-color: black; width: 60%; max-width: 480px; min-width: 320px; transition-delay: 0.4s; } .netflix-nav-black.visible { transition-delay: 0s; } .netflix-nav-red { background-color: rgb(214, 170, 85); transition-delay: 0.2s; width: 95%; } .netflix-nav-red.visible { transition-delay: 0.2s; } .netflix-nav-white { background-color: #fff; padding: 40px; position: relative; transition-delay: 0s; width: 95%; } .netflix-nav-white.visible { transition-delay: 0.4s; } .netflix-close-btn { opacity: 0.3; position: absolute; top: 40px; right: 30px; } .netflix-logo { width: 245px; } @media (max-width: 768px) { .netflix-logo { width: 197px; } } .netflix-list { list-style-type: none; padding: 0; } .netflix-list li { margin: 20px 0; } .netflix-list li a { color: rgb(34, 31, 31); font-size: 19px; text-decoration: none; text-transform: uppercase; } .netflix-list ul { list-style-type: none; padding-left: 20px; }

 <button class="netflix-nav-btn netflix-open-btn"> <i class="fas fa-bars fa-2x"></i> open </button> <div class="netflix-nav netflix-nav-black"> <div class="netflix-nav netflix-nav-red"> <div class="netflix-nav netflix-nav-white"> <button onclick="closeTab()" class="netflix-nav-btn netflix-close-btn" > <i class="fas fa-times"></i>close </button> <img class="netflix-logo" src="images/GOLD.png" alt="Logo" /> <ul class="netflix-list"> <li> <a onclick="closeTab()" href="index-en.php" class="gold">Home</a> </li> <li><a onclick="closeTab()" href="#about">About</a></li> <li><a onclick="closeTab()" href="#services">Services</a></li> <li> <ul> <li><a href="tattoo-en.html">Tattoo</a></li> <li><a href="beauty-en.html">Beauty</a></li> <li><a href="piercing-en.html">Piercing</a></li> </ul> </li> <li><a href="#contact">Contact</a></li> <li> <a href="index.php">Danish</a ><img src="/images//denmark.svg" alt="danish-flag" class="flag" /> </li> </ul> </div> </div> </div>

Answer 2

You need to attach an event listener to each <a> element.

 const netflix_open_btn = document.querySelector('.netflix-open-btn'); const netflix_close_btn = document.querySelector('.netflix-close-btn'); const netflix_nav = document.querySelectorAll('.netflix-nav'); const netflix_btns = document.querySelectorAll('.netflix-list a'); netflix_open_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') }); }); netflix_close_btn.addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') }); }); var length = netflix_btns.length; for (let x = 0; x < length; x++) { netflix_btns[x].addEventListener('click', () => { netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') }); }); }

 .netflix-text { text-transform: uppercase; } .netflix-list li a:hover { color: #d6aa55; } .netflix-nav-btn { border: 0; background: transparent; cursor: pointer; font-size: 20px; z-index: 10; } .netflix-open-btn { position: fixed; top: 30px; left: 10px; z-index: 10; } .netflix-nav { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform .3s ease-in-out; z-index: 10; } .netflix-nav.visible { transform: translateX(0); } .netflix-nav-black { background-color: black; width: 60%; max-width: 480px; min-width: 320px; transition-delay: .4s; } .netflix-nav-black.visible { transition-delay: 0s; } .netflix-nav-red { background-color: rgb(214, 170, 85); transition-delay: .2s; width: 95%; } .netflix-nav-red.visible { transition-delay: .2s; } .netflix-nav-white { background-color: #fff; padding: 40px; position: relative; transition-delay: 0s; width: 95%; } .netflix-nav-white.visible { transition-delay: .4s; } .netflix-close-btn { opacity: 0.3; position: absolute; top: 40px; right: 30px; } .netflix-logo { width: 245px; } @media (max-width:768px) { .netflix-logo { width: 197px; } } .netflix-list { list-style-type: none; padding: 0; } .netflix-list li { margin: 20px 0; } .netflix-list li a { color: rgb(34, 31, 31); font-size: 19px; text-decoration: none; text-transform: uppercase; } .netflix-list ul { list-style-type: none; padding-left: 20px; }

 <button class="netflix-nav-btn netflix-open-btn"> <i class="fas fa-bars fa-2x"></i>Open </button> <div class="netflix-nav netflix-nav-black"> <div class="netflix-nav netflix-nav-red"> <div class="netflix-nav netflix-nav-white"> <button class="netflix-nav-btn netflix-close-btn"> <i class="fas fa-times"></i>Close </button> <img class="netflix-logo" src="images/GOLD.png" alt="Logo" /> <ul class="netflix-list"> <li><a href="index-en.php" class="gold">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li> <ul> <li><a href="tattoo-en.html">Tattoo</a></li> <li><a href="beauty-en.html">Beauty</a></li> <li><a href="piercing-en.html">Piercing</a></li> </ul> </li> <li><a href="#contact">Contact</a></li> <li> <a href="index.php">Danish</a><img src="/images//denmark.svg" alt="danish-flag" class="flag" /> </li> </ul> </div> </div> </div>

Answer 3

Meybe it doesnt close because there is no page change, thus no reload. You could use some js to close it manually. Your example there is not close function related to item click. Ex.:

netflix_nav.addEventListener('click', () => {
    netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});