Click Outside To Close Mobile Menu
Here is another tutorial to add to our huge list of Divi menu tutorials! If you are viewing a Divi site on mobile and open the menu, but then want to close it, you may tend to click (or touch) the area around the outside of the dropdown, thinking it will work like other apps and close the menu. But not so, it does not do that in Divi. So we created a jQuery snippet to do just that, and 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!
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!
Here is the setting when using our plugin, it doesn’t get easier than this!
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.
I did not quite understand your point, can you elaborate?
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
Hi Manu!
Thank you for sharing the feedback. We will investigate further and update the guide.
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’);
});
});
I’m so glad you like our resources!
I don’t have any experience with the other thing you are asking, sorry!
Hi there … I tried the “Menu Module” code and it worked for the footer menu but not for the primary_menu on the header.
Right, the default header menu is different.
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!
Aww thank you very much, I’m so glad you are enjoying my resources!
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.
Hi Rajat!
Thank you for sharing the feedback. We will investigate further and update the guide.
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!
I’m glad it helped, please check our other tutorials as well for more Divi solutions.
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.
Thanks, glad you like it!