Use hamburger button with interactions to show and hide nav menu

Design help Animations & Interactions
1

Hi,

I need to make a navigator menu which open and close by clicking on the hamburger button and also close by clicking on navigator link. My problem is, that made interaction for hamburger button by triger Click- first click: the menu (div block) opens, the second click: the menu closes. thats works OK, but when i set interaction for the link to close the menu, the menu closes whitout using ‘second click’ on hamburger icon. To reopen the menu I need to click on the hamburger icon (nothing happens, because now Im using the second click interaction for the icon and the menu is already closed) and click again to make the first click.
I didnt use the preset navmenu, I tried to created it by myself thought it would by easier and under my control. Please try to look on my project in webflow setting. On desktop it should looks like on the image I sent. On tablet, links should show below the hamburger menu…

Can you help me to set it right without double click on the icon in the situation I wrote above please??

Thank you :slight_smile:

Here is my public share link: https://preview.webflow.com/preview/weseehome?preview=a32a84b3f509acfec0ccdfdb26fa4c15

1 Like
2

With 2 click interactions, it will never work, as you can’t update the state of one interaction with another action.

So it will work perfectly, but you need to only use one click interaction, and make an opening interaction and a closing interaction.

For the hamburger menu, you can place a div on top of it, and hide it. To your hamburger click interaction you will add a step that unhides the div. And you will give the closing interaction to this overlaying div, and you will make that interaction hide the div again.

The other closing trigger will just gt the closing interaction. it will make sure to hide the div too, everytime. So you won’t have any states/looping bug.

3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.