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

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(){
        if(jQuery(".mobile_nav").hasClass("opened")){
            jQuery(".mobile_menu_bar").click();
        }
    })
})
</script>

Menu Module

<script>
jQuery(document).ready(function(){
    jQuery("body").on("click", function(){
        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_0 .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!

NOTE: We plan to add this to our Divi Responsive Helper plugin as a setting!

Last updated Aug 9, 2022 @ 12:29 am

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 :)

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

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart