Menu won't open unless I tap twice

Hey everyone, I hope you are all doing well,

I am attempting to use menu items as the triggers that close the menu. The problem: after closing the menu using the said triggers I can’t open it again unless I tap on the menu icon twice.

Is there a way to fix this?

Welcome to the community @ghost_14 :wave:

Can you please include a read-only link for the project so I can take a closer peek?

Thank you for the warm welcome :slightly_smiling_face:

More context: it is a single-page site and the menu items take the user to different sections on the page.

So after some poking around (and with the extra info you provided) I’ve figured out the problem. The reason you need to click the hamburger menu twice after clicking on one of your links is that you’ve set up your hamburger icon to control both opening and closing the navigation menu.

If you click the hamburger icon once it opens the menu, but now you’re hamburger icon is expecting the next click to close the menu. If you click the navigation links you’re closing the menu, but your hamburger icon doesn’t know that — it still thinks that the next click should close the menu.

There are a handful of ways that you can fix the problem, but I’d say the easiest is by moving the menu close interaction from the hamburger icon to a separate element. I’ve done this before by creating an element that’s hidden by default and placed over the top of the hamburger icon whose only job is closing the menu.

By adding this extra element, clicking the hamburger icon would not only open the menu but un-hide the “close” trigger element so that your second click to close the menu is actually triggering a separate interaction entirely. Since your hamburger menu is only expecting one interaction (opening the menu) instead of two interactions (opening and closing the menu) it will trigger with a single click — regardless of whether you closed the menu with the icon or with any of the menu links.

Sadly it didn’t work. Maybe there is something that I did wrong.

Here’s what I did. I basically created two hamburger icons that hide and show depending on the state of the other. They are independent of one another. One opens the menu, and the other closes.

I think is the very same problem - when I tap on one of the links, the menu closes, but I believe it still ‘‘thinks that the next click should close the menu’’.

If there is anything that I did wrong please help me understand what it is.

I am also open to other solutions - I hope they are crazy difficult :sweat_smile:

Thank you.

It looks like you’re not hiding the close button when the navigation links are clicked so the hamburger icon click after the menu is closed is triggering the “close” interaction first. Updating that navigation link interaction to hide the close button should solve the issue.

That said, I’d suggest wrapping the hamburger menu with a “wrapper” div set to position: relative, then add the close trigger element as an empty child div set to position: absolute and set to fill the entire parent element — this way you only need to hide/show that one element within your interaction (plus it should eliminate any hamburger icon animation issues):


As another tip, unless you need separate interactions for each of your navigation links you can give your close interaction element a class that’s shared by your navigation links and use the Class trigger (instead of the Element trigger) within the interaction panel to control all menu close interactions with a single interaction:


I used the same solution, and it works beautifully :smiling_face_with_tear:

I can’t thank you enough, not only did you help solve that problem, but you have unlocked something in me, helping me think of other problems through a different lens.

A million thanks kind soul :slightly_smiling_face: