- This topic has 30 replies, 3 voices, and was last updated 2 years ago by David.
-
AuthorPosts
-
March 29, 2022 at 4:06 am #2170918Tobias
I made some adjustments to my mobile menu yesterday. Is there a way that the mobile menu is fullscreen?
Furthermore, you can still scroll the page in the background. That shouldn’t be possible either. The header and all menu items also move when scrolling. Can this be fixed?
March 29, 2022 at 4:24 am #2170944DavidStaffCustomer SupportHi 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.March 29, 2022 at 4:33 am #2170955TobiasOk, 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.
March 29, 2022 at 4:53 am #2170975DavidStaffCustomer SupportOK 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.
March 29, 2022 at 5:05 am #2170988TobiasThank 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.
March 29, 2022 at 5:11 am #2170994TobiasAlready fixed the problem with the second navigation bar on mobile view.
March 29, 2022 at 5:17 am #2171004DavidStaffCustomer SupportTo 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; }
March 29, 2022 at 5:23 am #2171008TobiasOk, 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 π
March 29, 2022 at 5:28 am #2171014DavidStaffCustomer SupportIs 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 */ }
March 29, 2022 at 5:34 am #2171017TobiasNo, 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.
March 29, 2022 at 5:39 am #2171023DavidStaffCustomer SupportHmmm…
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.
March 29, 2022 at 5:44 am #2171028TobiasOk, 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.
March 29, 2022 at 5:49 am #2171031DavidStaffCustomer Supportits 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.March 29, 2022 at 5:50 am #2171034TobiasTest it when scrolling a bit and than open the menu. When you open the menu on the top of the site it works well.
March 29, 2022 at 5:57 am #2171043DavidStaffCustomer SupportWhat device ? What browser ?
As it working fine on my iPhone -
AuthorPosts
- You must be logged in to reply to this topic.