Hi all,
I built an overlay menu that moves in from the right hand side when clicking on the hamburger menu in desktop mode. I would like to add a close animation where the overlay menu closes when someone clicks anywhere on the screen. For that purpose I created the element “nav-dim” but somehow is does not work. I think there is a problem with the z-index value in position. Could you please help.
Here my read-only link: Webflow - Heal Praxis Berlin
Staging website: menu button try
Hi there,
To properly stack elements on your page using z-index, there are two key requirements:
The elements must have their position set to relative, absolute, or fixed. Without proper positioning, z-index won’t take effect. Higher z-index values will stack elements on top of lower values.
For clickable overlays, ensure your pointer events are set to “Auto” on the overlay element. You can check this setting in the pointer events section of your element’s properties.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Set your nav-dim to position: fixed with a higher z-index than the page but lower than the menu panel, then add an interaction on it to close the menu on click. Had this on a client build, pointer events need to be set to “auto” or the click won’t register.
Hey @Samuel1993 ,
The nav-dim interaction that you have setup, does look fine in terms of closing the menu overlay, just make sure the nav-dim element is not set to display:none.
Have it’s display property as anything else and the interaction should work as you intend it to. Hope this helps.
