Elementor Close Menu On Click Outside Easily

Elementor Close Menu On Click Outside Easily

Just launched! Checkout the CSS Course for Elementor users.

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:

Elementor Close Menu On Click Outside Easily 1

First, add an HTML element close to your Elementor toggle nav menu

Add an HTML in your header template, close to your nav menu.

Elementor Close Menu On Click Outside Easily 2

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:

Checkout the Elementor Addon Finder directly

Comments

3 Responses

Leave a Reply

Just launched

CSS Course For Elementor Users

Offer incredible value to your clients by becoming a CSS ninja!