[Resolved] scrolling when mobile menu is open

Home Forums Support scrolling when mobile menu is open

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #924133
    Olga

    Hello,

    when I toggle the mobile menu, only a little portion of the page remains visible. That’s fine, but once I start scrolling, the page only scrolls in that time area between the bottom of the toggled menu and the bottom of the screen. Yes, you can close the menu, but I think intuitive behaviour is to start scrolling if you decide to just read the page.

    How do I make this menu just scroll to the top, or maybe even close upon starting to scroll?

    #924141
    Leo
    Staff
    Customer Support

    Hi there,

    That is the issue with default mobile navigation with this many menu items unfortunately.

    Have you considered using the off-canvas menu? Both styles (slide and overlay) should solve this issue for you:
    https://docs.generatepress.com/article/off-canvas-panel-overview/

    Let me know πŸ™‚

    #924207
    Olga

    Thank you Leo, that looks quite neat! I am trying the slide version, all is good but it does not have controls for sub menu item font size?

    #924235
    Leo
    Staff
    Customer Support

    That will require some custom CSS.

    Let me know when you implemented the off-canvas option and I will provide the code?

    #924244
    Olga

    It is implemented. I will put in the code if you can provide it please.

    I appreciate your help, but also I think it is somewhat incomplete to design a feature that does not have such a basic control, surely if you give people the control over the menu item font sizes, the sub menu items will have to be adjusted accordingly.

    #924255
    Leo
    Staff
    Customer Support

    I don’t see the off-canvas navigation on mobile currently.

    Perhaps you need to clear the caching plugin?

    Anyways, this CSS should work:

    @media (max-width: 768px) {
        .slideout-navigation.main-navigation .main-nav ul ul li a {
            font-size: 12px;
        }
    }

    This is actually rarely requested so we will stick with CSS solution for now πŸ™‚

    #924260
    Olga

    I am testing it on a staging copy https://www.staging4.cobbletales.com, and the code did not seem to work…could you have a look please?

    #924264
    Leo
    Staff
    Customer Support

    The code is indeed working.

    Perhaps try changing to 15px instead of 22px so it’s more noticeable?

    #924270
    Olga

    It is still the same size as main menu items where I am looking at it. Can you please send me a screenshot of where you are seeing it working to make sure we are talking of the same thing?

    #924328
    Leo
    Staff
    Customer Support

    Can you try the edited CSS?
    https://generatepress.com/forums/topic/scrolling-when-mobile-menu-is-open/#post-924255

    Make sure all caching is purged.

    If that still doesn’t work, please disable all caching for now.

    #924622
    Olga

    It does not work, and I have cleared the cache. Anyway in customiser the changes are supposed to be instant disregarding the cache? Here is the image of what I see https://drive.google.com/file/d/1D-XrthjNqoPqAgMlUpIZsSnsxJtdu3Ju/view?usp=sharing

    the font size is the same in main menu and in sub menu. Also, the text transform does not work as menu items are not actually capitalised, even though it is selected on customiser.

    Best,
    Olga

    #924676
    David
    Staff
    Customer Support

    Hi there,

    when making customizations to a site it is best to flush and disable any cache plugins. I also see you’re using the SG Optimizer which we are seeing a lot of issues with recently as it has a habit of re-ordering CSS.

    Could you flush and disable the plugin. Re-enable the Slideout and then let us know if the issue persists and leave it so we can take a look.

    #924728
    Olga

    Hello David,

    Flushed and disabled, the issue persists. You can have a look at https://www.staging4.cobbletales.com

    #924736
    David
    Staff
    Customer Support

    The code is being applied, but needs some tweaking:

    1. The font size property you have needs some importance so font-size: 25px; becomes font-size: 25px !important;

    2. You have text-transform: capitalize; which only capitalizes the first letter or each word. If you want them all to be uppercase then use the uppercase property instead.

    #924744
    Olga

    Thank you, the text is now uppercase, but sub menu items are still huge. If you see it working (supposed to be 12px) can you send me a screenshot please?

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