Help me find why my toggle doesn't work


I’m making a responsive navbar with a toggle button.
Here’s my code :

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 ?

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'));

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?

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

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

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