Help me find why my toggle doesn't work

JavaScript
1

Hi,

I’m making a responsive navbar with a toggle button.
Here’s my code : https://codepen.io/johnthecoder/pen/qeMQRe

When I click on the toggle the class .active is added to the ul that is not displayed right now.
If .active is added it should then display flex. But it doesn’t :frowning:.

Any idea why ?

2

I am not sure that the html markup along with the css of: display: none are cooperating.

This snippet will toggle the active class on hover, but I think you need to update your html and css to get it to work properly.

document.querySelectorAll('ul li a').forEach(e => {
  e.addEventListener('mouseover', () => document.querySelector('.navbar__list').classList.toggle('active'));
  e.addEventListener('mouseleave', () =>  document.querySelector('.navbar__list').classList.toggle('active'));
})
3

You have markup in your CSS that I’m not familiar with, but on line 44, is there a missing comma to separate the two selectors?

4

The eventlistener on the toggle works perfectly fine. It add the class “active” to my ul (navbar__list) then remove when clicked again.

5

This is the normal behavior I need, I think. Anyway with comma it doesn’t work either

6

Found my answer. In the JS i added ‘.active’ instead of ‘active’