My hamburger menu is randomly breaking and i dont know why. | Astro Lounge | Page 1

tepid raft Feb 28, 2023, 1:14 PM

#

very weird

chrome dagger Feb 28, 2023, 2:40 PM

#

Have you checked via the Inspector that the classes are being toggled correctly?
Your JS is targeting “.nav-links” which I don’t see in your HTML. Maybe you meant “.nav-link” (singular, not plural)?

Also, not sure if you need to worry about removing the “active” class when clicking on a “.nav-link” since the page would refresh on navigation anyway.

trim marsh Feb 28, 2023, 2:43 PM

#

chrome dagger 1) Have you checked via the Inspector that the classes are being toggled correct...

I will try to update the JS and remove the unnecessary JS

#

still broken. Also the hamburger menu is working fine when using npm run dev. And the classes do toggle active

chrome dagger Feb 28, 2023, 3:51 PM

#

Are you able to share the site?

#

And just to check, you used the inspector on the live site to check the classes?

shut briar Feb 28, 2023, 4:08 PM

#

Is this a hydration issue? Your JS saves off elements into local variables. If your elements are re-rendering client-side, they may replace the elements during hydration. Your saved-off query selectors would then be pointing to elements that are no longer in the document tree

If so, the standard fix is to use event delegation. Capture the toggle event at document and check to see if the target matches the selector you want.

chrome dagger Feb 28, 2023, 4:25 PM

#

If you're using Git, you can go back in your history and find where it still worked then compare that commit with the next one that broke it

faint scroll Mar 1, 2023, 5:59 PM

#

a minimal reproduction github repo would be needed here for a meaningful analysis

#My hamburger menu is randomly breaking and i dont know why.