Mobile menu overlay not closing correctly

Design help General
1

Hi,

I was wondering if anybody could shed some insight as to a bug I have before I attempt to rebuild the mobile menu. When I open the menu, then close it – I can’t select anything else on the page.

So for example, land on the page, open the menu, close it – following this none of the buttons, the menu button, etc aren’t clickable.

Can anybody figure out a quick easy fix or has anybody experienced this before?

Thanks in advance, Dan.

––

Update:

Seems as though inspect is showing me that the div “w-nav-overlay” stays (but transparent) when the menu is closed :frowning:

Here is my public share link: https://preview.webflow.com/preview/mcblinds?preview=d19738911d2bca14b968b0fa3db8b731

2

Hi @danwilko

Thanks for posting this, this definitely sounds like odd behavior.

However, I was unable to reproduce this behavior–I tried in the Designer, preview mode, and the live site.

When did it start occurring? Can you please send me screenshots of the behavior you’re describing?

Can you also please try the following:
(1) Try to reproduce the error while being logged into Webflow using Incognito mode with browser extensions turned off: Browse in private - Computer - Google Chrome Help
(2) If the problem persists, please take a screenshot of your Console and send it to me: Chrome DevTools - Chrome Developers

Could you please let me know what browser version you’re using by sending me your information from this page?

There should be a small share link when you visit the page which you can send to me.

Thanks in advance!

3

Yeah it’s very odd. It’s not a caching issue, well the website has only just gone live, and I can’t find a work around so I’ve had to go live with the bug present for now. I’ve found a workaround to make the mobile version better by changing the width of the fly-out menu, but it hasn’t fixed it.

So, I open the mobile menu:

397×676 87.4 KB

Now after I close the menu, this w-nav-overlay div seems to be sitting over a section of the page. Anything in the highlighted area below isn’t clickable. So if I try and re-open the menu for example, I can’t because of that overlay that isn’t disappearing.

1055×733 276 KB

I’m happy to give a member of staff access to the project if needs be. Let me know :slight_smile:

4

Hi @danwilko

Thanks for your reply.

After looking into this with a team member, we found that you duplicated the nav menu and placed it inside the other nav menu

1490×530 1.52 MB

-Both elements titled right and nav-list are nav-menus and right is a child element of nav-list.

When the menu button is clicked both nav-menus open, but only the parent nave menu closes.

To fix this, you will need to rebuild the menu and replace the right element with a normal div and link blocks.

Hope this helps!

5

Hi Brando,

Thanks for the quick reply! That makes sense. I didn’t realise they were both nav menus.

I’ll give that a shot but I’m pretty sure that will fix it :slight_smile:

Thanks again,

Dan

2 Likes
6

My pleasure! You should really thank @sabanna, she’s the mastermind that solved this puzzle. :slight_smile:

7

All fixed, thanks for the help – including you @sabanna :smile:

2 Likes
8

Always welcome, @danwilko :smiley:

2 Likes
9

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