How to close this nav bar on mobile when clicking outside of the menu?

Design help Animations & Interactions
1

Hey there,
I’ve noticed that the usability of my mobile page isn’t optimal. When the user opens the nav bar menu, it can only be closed by pressing the exact same icon. However, it would be more intuitive if it would close when tapping outside of the overlay.
How do I achieve this?

Here is an image, and the arrow shows where a touch should trigger the nav overlay to close.

mobileview-nav
mobileview-nav1080×2340 138 KB

Your help is greatly appreciated as I’ve been stuck on this for a while.

Best greetings

Here is my public share link: LINK
(how to access public share link)

1 Like
How can I change the sequence of items in the grid in the mobile viewpoint?
2

Add a click trigger on the background overlay and set it to close the menu , basically the same interaction you’re using on the icon, just applied to the overlay div. Did this on a client’s mobile nav and it makes the UX feel way smoother.

1 Like
3

That makes a lot of sense, can you help me finding this element? I’ve been trying for half a day to make it work but I just can’t find it. Is the the “mobile navigation shade”?

1 Like
4

Hey @fredj32 ,

You can probably solve this use-case by selecting ‘Tablet’ breakpoint and setting the Nav Menu element’s height to ‘Auto’ as highlighted in the screenshot below:

AJ - Nav Menu Height
AJ - Nav Menu Height1842×744 162 KB

And add the interaction ‘Close mobile menu’ on mouse click (1st tap) to the Mouse navigation shade element as highlighted in the screenshot below:

AJ - Mobile Navigation Shade
AJ - Mobile Navigation Shade1853×647 157 KB

And also edit the interaction to apply the animation on Menu lottie which affects ‘All elements with this class’.

image
image335×711 48 KB

This should close the menu if a user clicks on the overlay that is displayed in tablet and mobile breakpoints and also take care of the menu icon animation in that case.

Hope this helps.

2 Likes
5

This is awesome! Thank you so much! I managed to implement it with your screenshots.
There is only one thing that happens now. If the user clicks the hamburger icon twice, the menu closes, but the overlay stays, and it only disappears if they click on it.

Is there a way to ensure that the shade is also completely removed when the user clicks the icon twice?

In any case, I am very grateful for your help!

6

Hey @fredj32 ,

Welcome.

I can see that Mouse navigation shade element has an interaction enabled named ‘Close flyout menu’. Is there a reason why you are not linking the ‘Close mobile menu’ interaction to it instead?

I believe this interaction is causing some issues when the overlay is clicked since its not consistent with the elements that are visible on the tablet breakpoint and is causing some unexpected behavior.

When I apply the ‘Close mobile menu’ interaction to the shade element, even when I click on the overlay shade the menu closes and the shade disappears as you would expect it to as per the design.

Hope this helps.

Is there a way too speed animation up without them breaking?
7

Yep, Webflow doesn’t like when different elements reference separate close animations. One global “Close mobile menu” interaction keeps everything in sync.