Streaming live at 10am (PST)

Bug with custom mobile menu animation

Hey y’all, I’ve run into a really odd issue with my mobile menu when a user reaches tablet devices and lower. When a user clicks the hamburger menu and decides to immediately close it without navigating anywhere the user then loses all ability to click buttons or highlight text on screen. I’ve looked through the interaction and looked through the nav-bar’s structure and don’t see any indication for why this might be happening. There seems to be an invisible layer on top of the content when the animation finishes running. If anyone has an idea on how to fix this I will be eternally thankful! Read-only link is below!

https://preview.webflow.com/preview/kell-website?utm_medium=preview_link&utm_source=designer&utm_content=kell-website&preview=f2006a2c3b5501bc7212878d47a75475&mode=preview

Hi @Liamfmatteson

Try adding this css in the head of your site custom code section:

.w-nav-overlay{display:none!important}

Best

The problem still persists after adding this code. I also tried adding it to the head of the home page, but that didn’t fix the issue either. This is a problem that is happening side-wide. If I navigate to the “portfolio” page and open and close the menu the same problem will appear. Let me know if you have any questions. Thanks for the help!

Hey @Liamfmatteson

Set Overflow : Hidden to your “nav-wrap” and you’ll be good.

I added Overflow: hidden to my nav-wrap, and now when the interaction is initiated/the menu is opened the white background doesn’t go past the bounds of the container. Maybe I should undo this and instead do an overflow trick on the w-nav-overlay{display:none!important} that Blaise recommended. Not sure what the code for that would be but just a thought…

well it works for me

maybe delete all custom code and try again

Weird… clearly working for you. Well that’s good at least. Can you show me where you applied the overflow: hidden? Want to double check I’m applying it to the correct place.

Agreed that works on a computer, but when testing it on a mobile device, it gets cut off. I tested this on my iPad as well as my iPhone. Here’s a vid to show what happens. https://www.loom.com/share/69e7c017ea9246869c1fa071fc2a3c3c

@Blaise_Posmyouck @BBUXdesign Any other ideas?

Yeah weird …

Your Height is set to 12 VW, try to switch it to 12 VH or to a set value in Pixels.

Is it working when you publish the website ? not the Webflow Preview

I’m fairly certain the setting of VW on the nav has nothing to do with it. Nonetheless, I tried this out and it doesn’t make any difference. I know this looks like a weird hack but it solves some other issues in the site.

When I publish with the “Overflow: Hidden” it does what I showed in the Loom video above. If you load kellarchitects.com on your phone it’ll do what I’ve shown in the video as well.

I have a feeling that @Blaise_Posmyouck is on point with adding the custom code, because if you inspect the code, it’ll show that this div

isn’t going away. The confusing part is that this div isn’t visible anywhere in my layers panel. When I added the custom code, nothing happened, so maybe there’s something more to that code?

OK last suggestion, rebuild your Navbar using the default “Nav Menu” div block that comes with the Navbar component, not an extra div block you add later on.

Webflow might be confused if you mix the 2, I don’t know …

I had this issue in the past and I solved it without custom code.

And I always use the prebuilt elements inside the Navbar component

If you wanna custom code then I have no clue, sorry ahah ;D

I don’t think I’m ok with going back to a non-custom nav bar. I want the custom hamburger menu and animation. Thanks for trying to help!

You can customise it as you want, but customise the Nav Menu div block included in the Navbar component, not one you add yourself.

But maybe it’s completely unrelated …

Hi @Liamfmatteson

Try also adding a negative z-index and 0px height:

.w-nav-overlay{display:none!important;z-index:-1;height:0}

Let me know if that works.

Best

1 Like

This worked! Thank you so much @Blaise_Posmyouck !

1 Like

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