How to Close Divi Mobile Menu On Outside Click

In this tutorial you’ll learn how to close Divi mobile menu on outside click.

By default, the opened Divi mobile menu doesn’t automatically close when you click or tap outside of its boundaries.

It’s closing only when users click/tap to open a different mobile menu on the page (and, of course, by clicking it’s own menu toggle).

And if users want to interact with other elements on the page after they’ve opened the mobile menu they need to make an additional tap/click to close it first.

To streamline the user experience and eliminate this extra step we can implement a straightforward custom solution.

It will enable the mobile menu to automatically close whenever users click or tap anywhere on the page outside of the mobile menu itself.

We’ll do that using a simple JS function. And also we’ll see how to easily enable this feature for Divi MadMenu mobile menu with a click.

Table of Contents

1. Demo
2. Benefits of making the mobile menu close on outside click
3. Close Divi mobile menu on outside click JS code
4. Close a specific mobile menu only
5. Close Divi MadMenu mobile menu on outside click (no-code solution)
6. Conclusion

Demo

Click the mobile menu toggle in the live demo below to open the dropdown menu. Then click outside the open menu to see if it is closing automatically BEFORE and AFTER implementing the solution.

As you can see from the live demos above, the BEFORE mobile menu does not close when you click somewhere outside.

It closes only if you click to open another mobile menu (try clicking to open the AFTER mobile menu toggle when the BEFORE mobile menu is open). This is the default behavior.

On the other hand, the AFTER mobile menu closes automatically whenever you click outside of it’s boundaries. That’s because it’s been applied the fix using the JS function provided in this tutorial.

Benefits of making the mobile menu close on outside click

Here are some of the most important reasons for why you should consider making the mobile menu close automatically on an outside click/tap:

1. User-Friendly: It enhances the user-friendliness of the website. Users generally expect that clicking or tapping outside a menu will dismiss it. When this behavior is consistent with their expectations, it reduces confusion and frustration.
2. Intuitive: It aligns with common user interface patterns. Many mobile apps and websites use this approach, so it feels intuitive to users who are familiar with these patterns.
3. Accessibility: It can improve accessibility. Users with disabilities or those who rely on assistive technologies may find it easier to navigate when the menu closes with an outside click.
4. Faster Navigation: It speeds up navigation. Users don’t need to hunt for a specific close button, they can simply click anywhere outside the menu. This can be especially helpful on small screens where touch targets may be small.
5. Improved Engagement: Users are more likely to explore and engage with your content when they encounter fewer barriers to navigation.

Close Divi mobile menu on outside click JS code

To implement the automatic closing of the Divi mobile menu on outside click we need to use the following JS function:

/**
 * Close Divi mobile menu on outside click.
 * 
 * Closes the open Divi mobile menu if users click
 * somewhere on the page outside of the open mobile menu boundaries.
 * Passing the custom CSS class assigned to a Menu module will
 * make it apply to that specific menu only. 
 * Otherwise, it applies to all Divi menus on the page.
 * 
 * @source  https://divicio.us
 * 
 * @param  {string}  customCssClass  The custom CSS class assigned to the Menu module. Default is empty.
 * 				     Example: "myAwesomeMenu" . 
 */
function dvcs_close_divi_mobile_menu_on_outside_click(customCssClass = ''){
    document.addEventListener('click', function(event){

        /* apply to specific menu(s) or all menus on the page */
        let menu = customCssClass !== '' ? `.${customCssClass} ` : '';

        /* select all open mobile menus */
        let openMenus = document.querySelectorAll(`${menu}.mobile_nav.opened`);

        /* stop if no open mobile menus found */
        if(!openMenus.length) return;

        /* close mobile menu */
        Array.from(openMenus).forEach(openMenu => {

            let menuToggle = openMenu.querySelector(".mobile_menu_bar");

            if(!openMenu.contains(event.target)){
                menuToggle.click();
            }
        });
    });
} 
document.addEventListener('DOMContentLoaded', function(){
    dvcs_close_divi_mobile_menu_on_outside_click();                  
});

This function checks the page for any open mobile menus when users click/tap somewhere outside the menu boundaries. And if there is an open mobile menu it gets closed automatically. Works both for the Divi theme default mobile menu as well as the mobile menus created using the Menu and Fullwidth Menu modules.

Add this JS code to your Divi site your preferred way, I prefer using a Code module for adding custom code to the header templates.

By default this code will apply to all Divi mobile menus on the page if the dvcs_close_divi_mobile_menu_on_outside_click() function is called without passing it the customCssClass argument.

However, you can make it apply to a specific menu only as well.

Close a specific mobile menu only

If you want to make this feature apply to a specific Divi menu only then first add a custom CSS class to the Menu module in Advanced -> CSS ID & Classes -> CSS Class field. For this tutorial’s live demo I’ve used the tutorialDemoMenu CSS class, but you can use any other CSS class you want:

Then pass the tutorialDemoMenu CSS class (or your own CSS class if you used a different one) as argument to the dvcs_close_divi_mobile_menu_on_outside_click() function as shown below:

Note that it should be a CSS class (not an ID) and should not include the dot in front of it, just the class itself, like so: dvcs_close_divi_mobile_menu_on_outside_click(‘tutorialDemoMenu’).

Close Divi MadMenu mobile menu on outside click

Divi MadMenu allows you to make the mobile menu close automatically on outside click without the need to use any custom code.

To activate this feature you just need to enable the Close On Outside Click option in MadMenu Settings -> Content -> Mobile Menu.

Conclusion

Making the open mobile menu close automatically on an outside click is a user-centric design decision that enhances usability, accessibility, and the overall user experience.

It aligns with user expectations and can lead to higher user satisfaction and engagement.

In this tutorial, you’ve discovered how to implement this feature seamlessly for Divi mobile menus created using both the native Menu modules and the default header, as well as the Divi MadMenu extension.

And that’s it, hope you find this tutorial useful. To enhance your Divi website’s mobile menu even further, you may also consider making the mobile dropdown menu scrollable, and implement submenu collapsing.

Also feel free to explore our blog for even more Divi menu-related tutorials, you’ll discover lots of other valuable insights there. And please don’t hesitate to share your feedback in the comments section below, that’s highly appreciated.