Elementor Close Toggle Menu on Same Page Anchor Links Click

Elementor Close Toggle Menu on Same Page Anchor Links Click

Table of Contents

This tutorial will show you how to close your Elementor toggle menu on anchor link click.

When you have a link like this /#section , clicking it will both scroll to the appropriate section (default behaviour) and close the toggle navigation.

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 Toggle Menu on Same Page Anchor Links Click 1

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-menu-toggle') && document.querySelector('.elementor-menu-toggle.elementor-active') && !(event.target.closest('a') && event.target.closest('a').href.indexOf("#") == -1) && !(event.target.closest('a') && event.target.closest('a').nextElementSibling && event.target.closest('a').nextElementSibling.classList.contains('sub-menu'))) {
document.querySelector('.elementor-menu-toggle.elementor-active').click();
}
});
});
</script>

Finally, enjoy your new Elementor close menu on same page links!

And that's it! Everything should be working fine.

You have now improved UX with this Elementor closing menu toggle on same page links, saving a click for your users!

Looking for something else? Search across 2369 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply