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.
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> /* Please login to get the code * The code will be for the Elementor Close Toggle Menu on Same Page Anchor Links Click tutorial * Found at this URL https://element.how/elementor-close-toggle-menu-on-same-page-anchor-links/ */ </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!
6 Responses
Thank you for this code! I am looking to close a pop up with a menu inside of it upon clicking an anchor link. Do you have a code for that as well?
https://element.how/elementor-pop-ups-problems/
Lifesaver code! I searched for it a long time. Your are absolute genius! I searched for Elementor mobile menu close after click one page Website. Thank you!
Welcome Sonja!
Hi,
Works!!! Thank you so much.
But now the anchor links opens too low on the page (originally under the dropdown menu). Can this be fixed? I would like to have the links open hoghe on the page. I tried it with offset settings but that kind of a mess.
Thank you Maxime! very helpful as always!
I drop the same code for the new "widget menu" in elementor.
document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('click', function(event) {
if (!event.target.closest('.e-n-menu-toggle') && document.querySelector('.e-n-menu-toggle.e-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('.e-n-menu-toggle.e-active').click();
}
});
});