I’m working on a menu animation for an e-commerce website, everything is working fine except the very first click isn’t animating properly. I’m getting an error in my position settings by body that says “set Body element’s position to relative”, maybe it’s linked?
There’s two elements for the menu, the burger icon and the menu overlay. Both are animated by in one click with the burger menu.
The Navigation has a very high z-index (even though you don’t see in the panel), and is overlapping the menu items.
Set the Navigation to a lower z-index than the menu item and it should work.
Thanks Eli11. I’ve structured each z-index to be layered properly. The z-index of the menu-parent is 999 and the z-index of the menu-overlay is 998, do you see any issues with that?
That’s perfect.
But the Navigation element that’s a pre-built element from Webflow is getting an higher z-index than 999 if you don’t rewrite it.
I was setting z-index 10 to the Navigation, and the menu trigger worked fine.
You mean the “Menu-overlay” and “nav-links” are not animating the first time?
You can fix this by setting an initial state in the “Open menu” interaction to those elements.
For example, set an initial state for the “menu-overlay” with Size 100% width and 0 VH", this will set its position for the first click.