I have been following a tutorial on creating a scroll reveal website, but I've encountered an issue where my navigation menu won't close. Even though I copied the exact same code from the video/documentation. The idea is that when I click a JavaScript button, it should close the nav and then open it again.
I would really appreciate some assistance.
/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close')
/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
navToggle.addEventListener('click', () => {
navMenu.classList.add('show-menu')
})
}
/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
navClose.addEventListener('click', () => {
navMenu.classList.remove('show-menu')
})
}
/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')
const linkAction = () => {
const navMenu = document.getElementById('nav-menu')
// When we click on each nav__link, we remove the show-menu class
navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
// Additional JavaScript functions commented out for brevity
It seems that despite copying over the code accurately, the close button is not functioning as expected, and the menu remains visible. Additionally, the placement of the four dots icon seems to be incorrect within the navigation menu. Any guidance or support provided would be highly valued.
An extensive HTML/CSS/JavaScript code has been included in this post per your request. Please note that the project is still a work in progress.