[Resolved] scrolling when mobile menu is open

[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?

[Leo]

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 🙂

[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?

[Leo]

That will require some custom CSS.

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

[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.

[Leo]

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 🙂

[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?

[Leo]

The code is indeed working.

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

[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?

[Leo]

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.

[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

[David]

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.

[Olga]

Hello David,

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

[David]

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.

[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?

[Author]

Posts