Table of Contents
This tutorial will teach you how to close the mobile toggle Elementor menu on clicking outside of it.
You will see, it's pretty simple to get this Elementor close menu on outside click working!
Demo:
First, add an HTML element close to your Elementor toggle nav menu
Add an HTML in your header template, close to your nav menu.
Under advanced, set it to position:absolute so that it doesn't occupy any flow space.
Then, copy paste this "Elementor Close Menu on Click" code
Copy paste it in the HTML element.
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('click', function(event) {
if ( !event.target.closest('.elementor-nav-menu--toggle') && document.querySelector
('.elementor-menu-toggle.elementor-active')) {
document.querySelector('.elementor-menu-toggle.elementor-active').click();
}
});
});
</script>
Finally, enjoy your new Elementor close menu on outside click!
And that's it! Everything should be working fine.
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
Looking for something else? Search across 2445 Elements right here:
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
Comments
3 Responses
Hi,
Thanks for the code but can we apply it to menu links instead of clicking outside.
Yes, I have a tutorial for that here : https://element.how/elementor-close-toggle-menu-on-same-page-anchor-links/
This is great! Thanks! You could also use on mouseout if you don't want people to have to click to close.