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

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

Home Forums Support Close mobile menu when click/tap outside

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1564975


    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

    Customer Support

    Hi there,

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


    I attached two examples in private information section.

    Customer Support

    Any chance you can try the off canvas panel for mobile?

    It should have the behaviour you are after – you can test this on this site ๐Ÿ™‚


    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

    Lead Developer
    Lead Developer

    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.
            // Go up the DOM
            targetElement = targetElement.parentNode;
        } while ( targetElement );
        // This is a click outside.
    } );

    Not 100% sure that will work, but it should in theory ๐Ÿ™‚


    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

    Customer Support

    Hi there,

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


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