[Resolved] Auto close mobile menu when scrolling

[Nick]

Hi team –

Is there a way to autoclose the mobile menu when you start to scroll on a page?

To demonstrate, load the page below on a mobile device then click the hamburger icon. If you then start to try and scroll on the page, I would like the menu to auto-close (in the same way as when you click the X button).

thanks, Nick

[Tom]

Hi there,

This could open a can of worms, but in its simplest form you should be able to do something like this:

document.addEventListener( 'scroll', function( e ) {
    var openedMenus = document.querySelectorAll( '.toggled .menu-toggle' );

    for ( var toggle = 0; toggle < openedMenus.length; toggle++ ) {
        openedMenus[ toggle ].addEventListener( 'click', function() {
            openedMenus[ toggle ].click();
        } );
    }
} );

[Nick]

thanks Tom – I added this however it doesn’t appear to do anything

[Tom]

Can you try the updated code?: https://generatepress.com/forums/topic/auto-close-mobile-menu-when-scrolling/#post-1665954

[Nick]

Have updated the code, still doesn’t seem to do anything

[Tom]

Sorry about that – made one more edit. Hopefully this is the one 🙂

[Nick]

just updated and cleared caches, still doesn’t seem to be doing anything

[Tom]

Can you deactivate your caching/minifying so I can view the source of your site cleanly?

[Nick]

thanks – have deactivated.

[Elvin]

Hi there,

If I may suggest:

You can try this script:

<script>
document.addEventListener( 'scroll', function( e ) {
    const openedMenus = document.querySelector( '#mobile-header' );
	const btn = openedMenus.querySelector( 'button.menu-toggle' );
    if(openedMenus.classList.contains('toggled')){
        btn.click();
    } 
} );
</script>

[Nick]

Thanks Elvin – that appears to work, appreciated.

[Elvin]

No problem. 😀

[Author]

Posts