I know there are a few similar questions but I have waded through them without any luck. My event listeners (both "click") work great, but only once, after a page refresh. It is just code to slide the hidden nav menu out for a mobile device screen.
Here is the JS code:
/*Menu responsive code*/
const hamburger = document.getElementById('menuIcon');
const closeMenu = document.getElementById('closeNav');
const navUL = document.getElementById('navUL');
hamburger.addEventListener('click', () =>{
navUL.classList.toggle('show');
});
closeMenu.addEventListener('click', () =>{
navUL.classList.toggle('hidden');
})
Again, this problem has to do with the javascript, not the CSS/HTML since it works great that one time (unless I am completely wrong). Also new to javascript.
hamburger and closeMenu are my ionicons used/the buttons. the show and hidden classes just translateX between 0% and 100%.
In your case with 2 classes you should remove the other class when you are adding the new one.
if you are using only one class you can use toogle but with 2 classes yo have to use add and remove together. exemple here :
const hamburger = document.getElementById('menuIcon');
const closeMenu = document.getElementById('closeNav');
const navUL = document.getElementById('navUL');
hamburger.addEventListener('click', () =>{
navUL.classList.add('red');
navUL.classList.remove('blue');
});
closeMenu.addEventListener('click', () =>{
navUL.classList.add('blue');
navUL.classList.remove('red');
})