Mobile Menu - Links clickable despite being hidden

Hi everyone,

So I created a mobile menu to facilitate navigation on my new site. I followed one of the tutorials on YouTube from the live sessions.

The issue I have is that when the menu is hidden, (so when the hamburger symbol is visible) the div blocks are still clickable but invisible. Which means that sometimes they can appear on top of another link and it takes the user to the wrong page of course.

Any idea where I went wrong here?


Here is my site Read-Only: Webflow - Speak Institute

Hey @Jake,

Right now the links have an initial state with 0% opacity. This makes it possible to see through the elements, but they are still there and clickable.

You need to add a hide/show interaction to the menu links, just like you did for the menu icon. The default state will be set to hidden and upon click set them to flex. An then reverse that for the click to close.

Hope that helps. Happy designing!

Awesome @matthewpmunger,

That did the trick. I’m sure I followed the tutorial to the letter and it wasn’t mentioned to show/hide the links :thinking:

Thanks for your quick reply and help!

1 Like

My pleasure. Glad to help!

1 Like