Mobile menu full screen and no scrolling in background

Hi there,

To eliminate the body scroll when the menu is open we can take advantage of the mobile-menu-open toggle class GP adds to the root HTML element:

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

Now the mobile headers menu needs a fixed height that fills the screen and is allowed scroll.

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

The height: calc(100vh - 56px); this is 100% of viewport height minus the height of the Mobile Header.
The padding-bottom adds a buffer below the menu, its there to stop stuff getting stuck behind the phones UI. It may need increaesing.

Ok, that works so far. However, if I only open the menu after I have already scrolled a bit, it can no longer be scrolled. You can take a look. It is ok for me if the header is completely fixed in the mobile view and does not change size when scrolling like in the desktop view.

OK i also notice now on really small screen devices there isn't room for the logo and menu bar items so they wrap to two lines.

What if the Mobile Header was only 56px in height whether it be normal or sticky (fixed)?
You could do the by:

Go to Customizer > Layout > Primary Navigation and change the Menu Item Height on Mobile to 56px.

This should fix both issues.

Thank you. That Fixed the Problem. I had no idea, that this option is in the customizer from GP. The Button in the customizer is very small ;)

Is there any way to hide the vertical scroll bar at the bottom when the mobile menu is opened? It's a Plugin that i installed.

The Navigation bar from the second navigation ist now shown. This items are at the main nav in mobile view. The sec nav should be hide. Before the new css here ist was hidden ;)

Can you tell me how to define the line height between the menu items? It's a little bit too high.

Already fixed the problem with the second navigation bar on mobile view.

To hide the progress bar you can use this CSS:

.mobile-menu-open .readingProgressbar {
    display: none !important;
}

Mobile menu items will respect that height you set - so we need to add this CSS to give them a smaller value:

#mobile-header .main-nav ul li a {
    line-height: 48px;
}

Ok, that works but now i can't scroll to the end of the menu in mobile view. The last menu item drops under the bottom after scrolling. If we can fix this last problem, were done ;)

Is that when the Admin bar is in view?
As we didn't consider that in the CSS yet.

Simple fix that will probably protect you from UI issues would be to increase that bottom padding:

#mobile-header.toggled .main-nav>ul {
    height: calc(100vh - 56px);
    overflow: auto !important;
    padding-bottom: 50px; /* make this a much larger value */
}

No, it was on mobile view on my iPhone without admin bar. I changed the padding-bottom from 50px to 100px. Now it's fine when im at the top of the page. When i scroll a bit and open the menu i cant scroll the menu anymore.

Hmmm...
Instead of adding the padding, try this:

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

It adds margin to the last menu item.

Ok, after deleting cache at my phone it works with padding-bottom: 100px.

When i tip my finger on a menu item and scroll it works. But when i scroll the mobile menu in a blank space, i scroll the site in the background instead.

its working well on my iPhone.
Try opening it in an incognito/private browser and ideally on a different network to eliminate any other caching issues.

Test it when scrolling a bit and than open the menu. When you open the menu on the top of the site it works well.

What device ? What browser ?
As it working fine on my iPhone