Why is my vertical hamburger menu cut off on mobile?

Finished my site at like 5 am last night (I say last night because sleep came AFTER that) but immediately discovered my mobile menu, while it is supposed to scroll, doesn’t go far enough and cuts off several items on the bottom and half of the top item, which makes closing the menu a little tricky! Luckily I already had a page with a table of contents linking to the rest of the site so nobody is getting locked out of anything, but what’s going on here? I haven’t had a chance to hop back on and fiddle with it yet but I distinctly remember it telling me last night the height was automatic. Do I just need to make the grid smaller? Scratching my head as to why it’s automatically set to 100 vh without taking into account the editor x banner on the top and my phone’s navigation bar at the bottom. Any help would be appreciated. Thanks!

1 Like

I have the same, problem with my longer ones. I will seek an answer with you.

Here is the site I am working on for your reference
https://iamteejay.editorx.io/losangelesballet

I solved my issue with the menu. I noticed that my setting on the mobile layout changed when making some clever layout edits and effected the default settings of the size of the menu.

Open the menu, then make sure the container is set at 100vh and not in any pixels.

See circled HEIGHT field went to a weird 2537 px in height.

So, what I did is checked the desktop and tablet layouts for that same area and found that they had been unaffected and the menu scrolls on those two break points. So I copied the tablet breakpoint to the mobile layout and got this.

And now it scrolls on ALL device, including mobile. I hope this helps.

That is… VERY weird - I managed to solve it earlier today, but VERY differently. I just tried your solution - my container was indeed in pixels and I set it to VH - but that unsolved my problem. What I had to do was stupidly complex, and my menu does not scroll. I set the Y Scale to 85%, Translate Y to -7.4%, with bottom padding of 17 vh, as well as adjusting my grid - that centers the menu in the viewport, though I’m waiting on some people to test it for me in the morning. Bizarre…

Share a link, please. I am curious about your efforts.

Hey @elfloftpigeons and @teejay :wave:
It seems from your screenshots that because of changes made in the Grid, the Menu container automatically received a specific height which cause the overflow.

Let me know if this still occurs, and share a URL so I could check it.

Be kind, I only started started web design a few months ago! But here it is right now: https://elfloftpigeons.editorx.io/pet-pigeons
I haven’t played with the menu much to see if it’s a master or if it can be altered on desktop but I know that currently it doesn’t disappear off the screen soooo I’ll take

Okay, update on that!
I undid all the changes I had made to the menu and the container to compensate - everything reported being 100VH (maybe 100% for the menu itself? Can’t remember). But there was still zero scroll.

So I removed the grid from my container (though it was set to 100 VH so not sure what went wrong. That did not fix it either. So I took the menu off the container, and reapplied it to start the design anew.

Another cutoff - this time it was just at the bottom instead of the top and the bottom. I could scroll somewhat, but not far enough to see the bottom of my menu. Unchanged container at this point.

I went back into the adjustments, and with 3 little adjustings ended up with 16 VH padding at the bottom - now the menu will scroll fully to the bottom. So it won’t just natively handle itself - but one adjustment to padding for a nicer looking menu and scroll is certainly better.

Thanks!