Elementor Close Toggle Menu on Same Page Anchor Links Click
Get Premium

Elementor Close Toggle Menu on Same Page Anchor Links Click

Element.How also offers premium tutorials! Check them here:

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.

This works for both the WordPress Menu element, and the new Menu element.

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.

This is the code for the new Menu 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>

This is the code for the WordPress Menu 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!

Elementor Close Toggle Menu on Same Page Anchor Links Click

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

22 Responses

  1. 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?

  2. 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!

  3. 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.

  4. 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();
    }
    });
    });

      1. The code provided by Ismael works if you have it set to "on click" instead of "on hover".

        Soon I will add a proper code snippet for this, however Elementor are still making many changes to this element... I'm waiting until it's out of beta.

        Cheers!

  5. For the new Mega Menu:

    document.addEventListener('DOMContentLoaded', function() {
    var menu = document.querySelector('.e-n-menu'); // Selecting the menu element
    var menuToggleButton = document.querySelector('.e-n-menu-toggle'); // Selecting the menu toggle button
    var menuLinks = document.querySelectorAll('.e-n-menu-title-container a'); // Selecting all menu links

    // Close the menu when clicking on a menu item
    menuLinks.forEach(function(link) {
    link.addEventListener('click', function() {
    if (menuToggleButton.getAttribute('aria-expanded') === 'true') {
    menuToggleButton.click(); // Simulating a click on the toggle button to close the menu
    }
    });
    });

    // Close the menu when clicking outside of it
    document.addEventListener('click', function(event) {
    var isClickInsideMenu = menu.contains(event.target); // Checking if the click was inside the menu
    if (!isClickInsideMenu && menuToggleButton.getAttribute('aria-expanded') === 'true') {
    menuToggleButton.click(); // Simulating a click on the toggle button to close the menu
    }
    });
    });

  6. Thank you for this article. It solved the problem!\ Unfortunate that Elementor has not fixed this bug on their own. I see it listed in many old posts.

  7. Thank you for posting this. I am new to Elementor and I am learning a lot from your videos but I am having trouble getting this to work on a 2nd header. I have two headers set up in the theme builder so that when scrolling, a 2nd sticky header (with different logo) appears. It is on this 2nd header that I am having trouble getting it to close when one of the links to a menu anchor is clicked. Is there different code for a sticky header?

      1. I am developing it on local - here is a live link - username: andrew pw: dxroi.

      1. Thank you! I am still not able to get it to work on the sticky header. Any suggestions of what to check to see where I might be going wrong?

  9. Thank you for checking that. I am looking for the capabilities sub-menu to disappear when I have scrolled down the page and go back to the capabilities menu to select another item. When I do this from anywhere other than the very top of the page, the sub-menu stays open when a link is clicked. The header menu at the top of the page works as expected, the 2nd header which appears when scrolling does not.

    1. I'm not certain Laura... I visit your page, scroll down a lot, get the other menu, click a menu anchor in there, and it all works as expected... the menu closes...

      Do you have cache maybe? Try a hard page refresh (CMD + SHIFT + R)

  10. Hi Maxine,

    Thank you for your help. I tried doing it on my site : cvspeechtherapy.com but the mobile menu does not disappear when I click on the link.

    Your help is greatly appreciated

Leave a Reply