[Support request] Mobile menu disappears when I try to scroll through the menu items

[Deepak]

Hello Team,

I have enabled Mobile Menu using Layout -> Header -> Mobile Header.

With this I observed that if I try to scroll through the mobile menu or through sub menu (after opening sub menu the menu goes below the screen so we need to scroll down to see the last element in the menu), the menu immediately disappears.

So instead of the menu being scrolled, it looks like the original page starts to scroll while closing the menu.

Although this is not visible when I simulate the environment using chrome inspector tools for mobile devices but the issue is seen in actual mobile.

Also is there any way to add text “MENU” across the hamburger icon in mobile?

Regards

[Leo]

Hi Deepak,

Since you have a lot of menu items and sub-menus, the only solution is to use the off-canvas menu on mobile:
https://docs.generatepress.com/article/off-canvas-panel-overview/

As for adding the text, this should help:
https://docs.generatepress.com/article/mobile-menu-label/

Let me know 🙂

[Deepak]

Thanks Leo.

1. With canvas I had some other issue. I could see there was a slight transition delay during the left slide so I add below CSS, I hope this is correct?
.slideout-overlay {transition-delay: 0s; transition: visible !important}

2. I am unable to add MENU label using the steps you shared. Somehow it works in customizer but doesn’t work in normal view. I can see that in Customizer the MENU label is added via mobile-menu span class but in normal view it is added to screen-reader-text class which is why I think the label is not showing. But I am not sure of the root cause and how to fix this?

3. I have a requirement to show different menu on home page and a different one on remaining site. I achieved the same using

add_filter( 'wp_nav_menu_args', function ( $args ) {
    if ( 'primary' === $args['theme_location'] ) {
        if ( is_page(2) ) {
            $args['menu'] = 'Main Menu';
        } else {
            $args['menu'] = 'Primary Menu';
        }
    }
    return $args;
} );

But this doesn’t seem to work for off-canvas menu. Is there any alternate code which I can use?

Thanks

[Fernando]

Hi Deepak,

1. This should be alright.
2. That’s odd. Can you try disabling non-GP plugins temporarily to test? It would be good to take a backup of your site before doing so.
3. Can you try this code instead?:

add_filter( 'wp_nav_menu_args', function ( $args ) {
    if ( 'slideout' === $args['theme_location'] ) {
        if ( is_page(2) ) {
            $args['menu'] = 'Main Menu';
        } else {
            $args['menu'] = 'Primary Menu';
        }
    }
    return $args;
} );

Let us know how it goes.

[Author]

Posts