I am working on a nav menu.
Working fine until on the mobile landscape and portrait.
I have set the nav_menu_wrapper to position: absolute with z-index: 33
Here is my site Read-Only:
https://preview.webflow.com/preview/saas-website-53bcde?utm_medium=preview_link&utm_source=designer&utm_content=saas-website-53bcde&preview=6cedecb320659154689a1f599618cb71&workflow=preview
For a basic nav, you shouldn’t need to modify Webflow’s default nav menu arrangement at all - and if you do, you’ll likely end up with a broken nav.
Webflow.js is designed to open dropdowns a certain way, and create the hamburger mobile menu a certain way, and you’re changing the playing field so things don’t work as they are intended to when the scripts do their work.
That includes z-index.
However to answer your question as to why z-index isn’t behaving the way you expect, you might read up on “stacking order”.
Currently you have z-indexed items within other z-indexed items and that stacks them relative to each other, like this-
Here, the 1000 element is beneath the 100 element because the 1000 element has a parent element with a z-index of 3.
I would like to add only links to understand that the new “stacking context” is not created only with “z-index” (while in request it is ) but also with eg. isolate, transform , filter, rotate etc.
and many other articles or videos