Menu Animation incorrect on 1st click, every click after works properly

Hello!

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.

Any help would be great, thanks!


Here is my public share link: https://preview.webflow.com/preview/outsourcecc?utm_medium=preview_link&utm_source=designer&utm_content=outsourcecc&preview=38b8377a19e510ea2f7382eb3d57f9a8&mode=preview

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.

Hope this helps

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.

I had that set to 997…I just tried 10 and no bueno either

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.

That’s closer, the menu comes in from the right place. The animation still isn’t right, but maybe that’s just a bug in Webflow animations?

Have you tried setting initial stages for the “nav-links” (to Move -100%)?
This should fix it.

That fixed the issue, thanks Eli11!

1 Like