Mobile Navbar Menu being cropped

Hi all,

So I’ve had this problem with a couple sites now and I’m not too sure what’s happening.

The problem is the hamburger menu on mobile devices is being cut off at the bottom. Meaning the last link in the menu has been trimmed by about a quarter. It doesn’t make any sense as I haven’t assigned a height at all.

When inspecting the element, there is a class ‘w-nav-overlay’ which seems to be assigning a height for some unknown reason. Plus I’ve no control over that class.

Here’s share link:

If anyone has any ideas, that would be awesome!

Hi @rossvh, thanks for reaching out. I took a look at the home page on the site on all views, but I am unable to see the same behavior. Is the issue happening on the Home page? On the published site or only in the designer? On a mobile phone or also on the desktop?

Take a peek how the menu is working for me:

Thanks in advance!

Hi @cyberdave. Apologies, forgot to mention it’s not the homepage menu this is happening on, but all the other pages (eg. Rooms).

The problem really only occurs when on an mobile device. I have an iOS device but a colleague has the same problem on his Android.

I connected my device to my laptop so I could inspect the elements and they all pointed to the .w-nav-overlay class. Just rather puzzled by the problem here.

Thanks for your reply!

Hi @rossvh, I took a look on android, and it seems to be working for me:

Could you let me know exactly what kind of android device the issue occurs? So far for me, it is looking normal on iOS9, iOS10 and Android 5.

Thanks in advance!

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