How To Close The Divi Mobile Menu By Clicking Outside The Dropdown Tutorial by Pee Aye Creative

How To Close The Divi Mobile Menu By Clicking Outside The Dropdown

In this tutorial I will show you how to close the Divi mobile menu by clicking or touching outside the menu dropdown area

FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!

Divi Responsive Helper by Pee Aye Creative 2.3

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Add The jQuery To Your Website

I will give you the jQuery needed to do this with either the default Divi header menu or if you are using the Menu module with the Theme Builder. Either way, you will simply need to paste the code into your website.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

Default Header Menu

<script>
jQuery(document).ready(function(){
    jQuery("body").on("click", function(event){
        var clickedElement = jQuery(event.target);
        if(clickedElement.closest('.mobile_nav').length > 0){  
            return;
        }
        if(jQuery(".mobile_nav").hasClass("opened")){
            jQuery(".mobile_menu_bar").click();
        }
    })
})
</script>

Menu Module

<script>

jQuery(document).ready(function(){
    jQuery("body").on("click", function(event){
        var clickedElement = jQuery(event.target);
        if(clickedElement.closest('.mobile_nav').length > 0){  
            return;
        }
        
        if(jQuery(".mobile_nav").hasClass("opened")){
            jQuery(".mobile_nav").removeClass('opened');
            jQuery(".mobile_nav").addClass('closed')
            jQuery("ul#mobile_menu1").css("display", "none");
            jQuery('.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar:before').css("content","a");
        }
    })
});
</script>

And that is all it takes! This tutorial was shorter than most, but it’s very simple. If you need any help, please watch the video and be sure to check out out other Divi tutorials!

Do It With A Setting!

Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!

Divi Responsive Helper by Pee Aye Creative 2.3

Here is the setting when using our plugin, it doesn’t get easier than this!

set the mobile menu scrollable height setting in the Divi Responsive Helper 2.3

Last updated May 8, 2023 @ 1:14 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

16 Comments

  1. Nick

    Hey great work,

    I have been searching for tutorials like this for a long time. But this code doesn’t work well with the dropdown submenus. Clicking on the mobile dropdown submenus hides the whole menu.

    Please bring a solution to this too.

    Reply
      • Manu

        I think i have the same problem. I use your submenu css and script to collapse the divi mobile submenu. When i click on the arrow to open or hide the submenu, the whole menu will close. its like clicking outside of the dropdown menu. Do you have a solution for this problem? Thank you

      • Hemant Gaba

        Hi Manu!

        Thank you for sharing the feedback. We will investigate further and update the guide.

  2. Leo

    Hi Nelson. Firstly, thank you for this fantastic set of resources. It has been a go-to for me for the last couple of years when trying to teach myself divi/coding.

    Secondly, do you know if there is an easy way to combine this with a reveal section? I have basically used reveals to create a mega menu but need the “reveal” to close when clicking outside. The reveal code I am using is:

    jQuery(document).ready(function() {
    // Hide the div
    jQuery(‘#reveal’).hide();
    jQuery(‘.rv_button’).click(function(e){
    e.preventDefault();jQuery(“#reveal”).slideToggle();
    jQuery(‘.rv_button’).toggleClass(‘opened closed’);
    });
    });

    Reply
  3. Tesfu

    Hi there … I tried the “Menu Module” code and it worked for the footer menu but not for the primary_menu on the header.

    Reply
  4. Manifa

    Just wanted to say a BIG “merci” and a huge “j’adore” your tutorials. I always go to your website when I’m looking for an answer. Thank you again from France!

    Reply
  5. Rajat

    I have a problem in this “Menu Module” if we open menu after that go to the dropdown menu after we click the menu was closed. I want if we click outside the menu in Mobile mode it close but it reverse we click anywhere it close.

    Reply
    • Hemant Gaba

      Hi Rajat!

      Thank you for sharing the feedback. We will investigate further and update the guide.

      Reply
  6. Jaroslava Vagner Svensson

    Oh did I need this now! I had not idea how to do this, and my client really wanted it and I could not argue about that. 🙂 So grateful! Thank you!

    Reply
    • Hemant Gaba

      I’m glad it helped, please check our other tutorials as well for more Divi solutions.

      Reply
  7. Jason L

    Another great tutorial, thanks Pee Aye!!

    As I use both the default Divi header and a custom header for some other pages, I found that putting your default script in my child theme functions.php file works great for both default headers and custom headers that use the menu module.

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart