[Support request] Mobile menu full screen and no scrolling in background

Home Forums Support [Support request] Mobile menu full screen and no scrolling in background

Home Forums Support Mobile menu full screen and no scrolling in background

  • This topic has 30 replies, 3 voices, and was last updated 2 years ago by David.
Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts
  • #2170918
    Tobias

    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?

    #2170944
    David
    Staff
    Customer Support

    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.

    #2170955
    Tobias

    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.

    #2170975
    David
    Staff
    Customer Support

    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.

    #2170988
    Tobias

    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.

    #2170994
    Tobias

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

    #2171004
    David
    Staff
    Customer Support

    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;
    }
    #2171008
    Tobias

    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 πŸ˜‰

    #2171014
    David
    Staff
    Customer Support

    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 */
    }
    #2171017
    Tobias

    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.

    #2171023
    David
    Staff
    Customer Support

    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.

    #2171028
    Tobias

    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.

    #2171031
    David
    Staff
    Customer Support

    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.

    #2171034
    Tobias

    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.

    #2171043
    David
    Staff
    Customer Support

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

Viewing 15 posts - 1 through 15 (of 31 total)
  • You must be logged in to reply to this topic.