Mobile menu full screen and no scrolling in background

iPhone 12 Pro, Safari. iOS 15. I recorded a video for you. The Link is in the private information.

Hmmm thats odd. It kinda says that either the mobile-menu-open class is getting toggled or its CSS is being ignored,
This CSS:

.mobile-menu-open body {
    overflow: hidden;
}

try with some !important:

.mobile-menu-open body {
    overflow: hidden !important;
}

Sorry but with !important; nothing changes ;(

Tested with clear cache and without admin login.

Hmmm shooting in the dark as it kinda works on my 13 and my older phone.

Lets give this a shot. Change:

.mobile-menu-open body {
    overflow: hidden;
}

to:

.mobile-menu-open,
.mobile-menu-open body {
    overflow: hidden;
}

.mobile-menu-open,
.mobile-menu-open body {
overflow: hidden;
}

Same issue. Also testet with

.mobile-menu-open,
.mobile-menu-open body {
overflow: hidden; !important;
}

oh my... lets try this:

.mobile-menu-open,
.mobile-menu-open body {
    max-height: 100vh;
    overflow: hidden;
}

Not sure but i am running out of ideas lol

No more scrolling but jumping to the top of the page when open/close menu.

Yeah - thats a problem when you give a container a height and aside from writing a bunch of JS theres not much to be done about it.

This is probably the last thing i have in my bag:

.mobile-menu-open,
.mobile-menu-open body  {
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    overscroll-behavior: none;
}

OK, that doesn't work. I have now deleted all code changes related to mobile navigation. The navigation is still totally broken in the standard view.

I really don't care about the subtleties of design. I just want it to be 100% working and user friendly.

I tried this:

#mobile-header.toggled .main-nav>ul {
    height: calc(100vh - 56px);
    overflow: auto !important;
}

.main-navigation.toggled .main-nav li:last-child {
    margin-bottom: 100px;
}

.mobile-menu-open,
.mobile-menu-open body  {
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    overscroll-behavior: none;
}

And i could not replicate the background scroll

In this way, the menu is not shown completely. It's bugging at scrolling and i can't see the last 2 or 3 menu items. I can make you a video again if you want.

.

Now i tested it with the canvas panel on mobile only. Same issue here. I removed all of my custom css and tested it again without any success. Whats wrong with this mobile navigation???

Hi Tobias,

Can you try modifying this CSS you have:

#mobile-header.toggled .main-nav>ul {
    height: calc(100vh - 58px);
    overflow: auto !important;
    padding-bottom: 100px;
}

into something like this:

#mobile-header.toggled .main-nav>ul {
    height: calc(100vh - 58px);
    overflow: auto !important;
    padding-bottom: 100px;
    top: 58px;
}

Kindly let us know how it goes. :)

Thanks for the answer. Unfortunately it makes no difference. But I have seen on other sites that the same problem exists there. It's up to GP. I'll leave it like that for now. Basically it works.