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

Nelson Miller Pee Aye Creative
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.

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

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 [last-modified %date%]

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

21 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
  8. Muhammad Tayyab

    Thanks, Dear for the really great information you are sharing, I have a problem here. I have created a header in the theme builder, here are 3 headers with a hamburger menu. 1 is normal and 2 will appear when 1 will stick to the top and the 3rd one is for mobile only.
    I add this code in the header section and it works with only 1 normal menu, not with the other two.
    Is there any way to work with the hamburger menu?

    Reply
    • Hemant Gaba

      Hi Muhammad!

      Can you please share the URL of the page to investigate further?

      Reply
  9. Muhammad Tayyab

    Thanks for intent respond, I add this code it working fine with normal header but it is not working with sticky header and mobil menu, here is URL.

    https://hisukh.digitalworldusman.com/

    I am still designing this website but need to adjust please:
    Thanks

    Reply
    • Hemant Gaba

      Sorry, I’m not able to see any menu on the homepage. Can you please let me know the exact page on which I can check the issue?

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart