[Support request] Close mobile menu when click/tap outside

[Mikko]

Hi,

My mobile menu doesn’t close when clicked/tapped outside of it.

I would like it to do so.

If I have a sub-menu open and I click outside of the whole menu then the sub-menu closes but rest of the menu stays open.

On desktop the menu closes when I tap outside of the menu. On mobile the menu stays open when I tap outside.

How could I get the mobile menu close when tapped outside?

I tried setting the menu open on hover, click menu item and arrow but that didn’t have effect on closing the menu.

Thank you very much

[David]

Hi there,

could you link me to your site, so i can see the current setup ?

[Mikko]

I attached two examples in private information section.

[Leo]

Any chance you can try the off canvas panel for mobile?
https://docs.generatepress.com/article/off-canvas-panel-overview/

It should have the behaviour you are after – you can test this on this site 🙂

[Mikko]

Yes, the off canvas panel does close when tapped outside.

I’d prefer the traditional menu though that opens downwards. Sometimes I’m not working with Pro so it would be nice to have this effect nonetheless. And all this adds to workflows even though not much but I defenitely would prefer if it was possible to close the menu by tapping outside with all the menus, at least the primary menu as that’s the one I usually use out of the box. I’d prefer if I could have some code to put in my child theme.

Thank you

[Tom]

Hi there,

This would require custom javascript. For example:

document.addEventListener( 'click', function( evt ) {
    var openedMenu = openedMenu = document.querySelector( '.toggled .menu-toggle' ),
        targetElement = evt.target;  // clicked element

    do {
        if ( targetElement == openedMenu ) {
            // This is a click inside. Do nothing, just return.
            return;
        }

        // Go up the DOM
        targetElement = targetElement.parentNode;
    } while ( targetElement );

    // This is a click outside.
    openedMenu.click();
} );

Not 100% sure that will work, but it should in theory 🙂

[Mikko]

Thanks Tom,

That code worked.

I just realized that adding JavaScript to child theme is not as straightforwards as putting it inside script tags.

Is there some easy trick to include it in child theme? Otherwise I guess I just keep it in GP element.

Thank you

[David]

Hi there,

you would need to enqueue the scripts in a child theme – this developer level article explains:

https://developer.wordpress.org/themes/basics/including-css-javascript/#scripts

[Author]

Posts