Mobile Nav Menu misbehaving


My mobile nav menu is acting up again.

Two issues:

  1. Tap the “X” when nav menu is open also taps the hamburger menu under it, reopening the menu. This behavior only seems to occur on the actual mobile device when I use my fat thumb. Tried using skinny pinky finger and still clicks the element behind as well. I tried playing with Z values but no luck. Also tried to play with hide/show interactions but there doesn’t seem to be a good option for “when menu gets opened” trigger when using the webflow menu widget.

  2. I have a “Dim Overlay” div (fixed, cover whole screen) that shows when menu button is pressed to focus user on the menu and dim out the site. Desired behavior is for the dim overlay to go away when user clicks outside the menu, a link, or the X along with menu close. I figured if I just add an interaction when user clicks the Dim Overlay div to hide that element would work. Unfortunately, it only works for screen areas to the left of the nav menu, but not below. I tried playing around with the “nav menu take up full screen height” option but no luck. I assume something from the nav menu is extending below what’s actually there and covering up the dim overlay. Indeed inspector calls this space w-nav-overlay-0.w-nav-overlay.

At this point I’m thinking it’s probably just easier to build the menu from scratch but figured I’d ask here first.

Thank you as always!

Here is my site Read-Only:

create animation again when user click menu button then menu open and when user click X then menu move -100% and when user click overlay then .nav-menu move right -100%

@Moheen thanks for responding but this doesn’t solve the issue.

Is there a way to access the Webflow menu widget trigger and animation?

let me check any simple way

replace this navbar and create this again

Thanks @Moheen . I ended up just scraping the nav menu widget and building it myself :).

1 Like

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