DEV Community

Discussion on: How to create full-screen drawer navigation in HTML, CSS, and JavaScript

Collapse
 
christvolo1 profile image
Christy Volosin

I love this toggle menu, but the JS part that's supposed to remove the "nav-open" class doesn't work for me. I need it to close the menu after I click the links. It was navigating to the sections before I added that part of JS, so whether I comment out that code block or not, it doesn't affect anything.

Collapse
 
khwilo profile image
Khwilo Kabaka

Hi,

Can you post the JavaScript code snippet that you have written? I would like to know if there's any syntax/logic error in your code.

Collapse
 
christvolo1 profile image
Christy Volosin

Sure. This is my JavaScript.

const navToggle = document.querySelector(".nav-toggle");
const navLinks = document.querySelectorAll(".nav__link");

/This works/
navToggle.addEventListener("click", () => {
document.body.classList.toggle("nav-open");
});

/* Doesn't Work: Supposed to close toggle menu after clicking the menu items */
navToggle.forEach(link => {
link.addEventListener("click", () => {
document.body.classList.remove("nav-open");
});
});