I have a mobile nav menu hamburger icon with interactions that change it between a hamburger and X. I am using the menu_click_catch div to catch the second click that reverts the X icon back to the hamburger icon.
My issue occurs when the menu is opened, and the next click is neither on the X icon or on the menu. This causes the menu to close, but does not trigger the X->hamburger interaction. These areas are the space above and below the open nav menu.
I’ve tried putting the close_hamburger animation on the menu container div as well as other parent elements to the menu button, but this causes the whole menu to disappear when clicked for some reason. I’ve also put the close_hamburger animation on my Home section container which is what appears to be the backdrop to the nav menu. However, it seems that when the menu opens, there is a default invisible div that catches the off-menu clicks and causes the menu to close called “w-nav-overlay”
For one possible solution, I’ve used the following code to trigger a .click() on the menu_click_catch when “w-nav-overlay” is clicked. (It only works when placed in the global custom footer are, not in the page custom footer code are):
This works perfectly for off-menu clicks that are below the nav menu. However, it doesn’t cover the small area above the nav menu between the nav button and branding div. Using Chrome inspect element, it appears that this area is called .container, but that causes some weird effects when I target it. Can someone please help with the correct element I should be targeting here?
Alternatively, I was thinking if I could piggyback on the .menu-close() function and cause that to trigger a menu_click_catch, that would also work. This seems like a cleaner and probably more versatile way to solve this problem, but I don’t know how to go about implementing this.
Here is my public share link:
https://preview.webflow.com/preview/otonomi?utm_medium=preview_link&utm_source=designer&utm_content=otonomi&preview=94eaa54f32abefb31e4e2213bab983a5&mode=preview