Overlay Menu: Menu Links still clickable despite Interaction Opacity

Design help Animations & Interactions
1

Hi there,

my issue is a little bit hard to explain.
I’m trying to build a full width menu overlay. It’s name is menu-wrapper.
While clicking on the burger menu on the initial state, the menu should appear – BUT during the initial state (opacity 0%) the menu-links are still clickable. They interfere other clickable elements like the burger menu button as shown, because of the div element above (menu-wrapper).

Can somebody help me to fix this?

The next step should be, to make the burger menu also visible on the white menu-wrapper, to close the wrapper again. BUT here also, without making underlying links or buttons clickable on the menu overlay.

Here is my current project: https://preview.webflow.com/preview/yah-2018?utm_source=yah-2018&preview=468b7384c1123b7fa404f88cf495c713

Many thanks!!

1 Like
2

Hello @youngandhyperactive

Opacity is not removing the element just makes the element transparent. You should use display + opacity.

Hope this helps

Piter :webflow_heart:

1 Like
3

Hey @PeterDimitrov

you are my hero!!! :smiley:

Thanks a lot!

1 Like
4

Happy to help! If you need something feel free to reach out :webflow_heart:

5

Hey, Im having the same problem, tried to solve it with hidden oveflow and size animation but it still clickable even when its hidden. maybe you can help me?

Here is my read only link (the problem is ONLY in the mobile version) - https://preview.webflow.com/preview/myaguda?utm_medium=preview_link&utm_source=dashboard&utm_content=myaguda&preview=b6d6686664f50d23d2a75a180f4b4677&mode=preview