I need some guidance on how to properly share code on stackoverflow. For the complete code, you can view it on Codepen:
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
})
document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}))
I am currently experimenting with HTML, CSS, and JavaScript from scratch. My goal is to create a hamburger menu independently. After watching tutorials on YouTube and copying the provided code, I managed to make the hamburger menu functional. It can be clicked to reveal a dropdown navigation bar and toggled back to its original state by clicking again. When inspecting the elements in Developer Tools, the 'hamburger' class transitions between 'hamburger active' and 'hamburger' as expected.
However, when I added a grid container code under the 'navbar' class, the hamburger menu ceased responding to clicks. I am puzzled as to why it no longer toggles to active upon clicking. Could someone please clarify this for me? Thank you.