Menu Animations Pauses The Entire Website Interactions

Hi there,
Here’s a quick look video about the problem. When I open the custom Hamburger menu and close it, I can no longer interact with the rest of the website even though I have set the animation property to hide the Burger Menu Wrapper.
https://www.loom.com/share/24465023a2d64beabb4821369b7c9867

I can’t figure out what’s causing this problem. Any help is appreciated :frowning:

Host link: https://question-8a385b.webflow.io/
Read link: https://preview.webflow.com/preview/question-8a385b?utm_medium=preview_link&utm_source=designer&utm_content=question-8a385b&preview=b6a02eb5f7b69c8946a44d19c13ed60f&workflow=preview

HI @Mehmet you w-nav-overlay get height 100vh but never shrinks when nav close. You should thing about your nav structure as I see that it is set imo not optimal way. I have tried to fix it but I have end up with complete nav rebuild. You can check WF showcases to see if there is navigation example similar to yours to see how custom navigation is build. You can also check codepen to get an idea about navigation HTML structure.

1 Like

Hi @Stan Thank you for checking the dev tools. You’re totally right. I think the problem rose because w-nav-overlay is from Webflow Hmabuger icon, so what I did was create a custom Hambuger button (div with the same class, inside of it are the two rectangular lines) and applied the animation to it. And it solved the problem :)!!!

One thing I didn’t understand, is why you said the Nav structure looks weird? It’s a button next to a hidden Div. The hidden Div has two additional divs. The BG div which is absolute & the List div which contains the links. Do you think this is a bad configuration?

Again, thanks for the help!

1 Like

HI @Mehmet glad to see you have been able to solve it. In coding is always many ways how to achieve identical result. I have only mentioned because I thing that custom nav can be done different maybe simpler way. :wink:

1 Like

I’ll be sure to check other methods. Thanks again!

1 Like