Get Premium

Elementor Close Menu On Click Outside Easily

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

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. This code is for the 'old' Elementor menu element.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Close Menu On Click Outside Easily tutorial 
 * Found at this URL https://element.how/elementor-close-menu-on-click/ 
 */ 
</script>

Here is the code for the new Elementor menu element (mega menu)

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Close Menu On Click Outside Easily tutorial 
 * Found at this URL https://element.how/elementor-close-menu-on-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 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

17 Responses

  6. Are you sure Max, because at my end it's not happening by default? Both menus are overlapping each other. Can you please share some links? Thanks.

    1. Well to be clear I'm talking about other sub menu, in the same mega menu element. Do you have multiple mega menu elements?

      1. Oh no, I'm not talking about the sub-menu here, I have 2 mega menu elements on the same header, and both of them overlap each other (open/close).

  7. @Akhilesh – I will create this modification in JS.

    But meanwhile – could you show me the position of both your mega menus?

    I have similar case. On the left of header I have first mega menu and on the right I have other mega menu with search. I created one mega menu and with flex I pushed to the right search mega menu. Because of this, everything works fine with basic modification from @Maxime.

  8. Did Elementor or Elementor Pro just make a change in the recent release that makes the "new mega menu" code above not work? I just updated the elementor version and now the script you wrote isn't working.

    Elementor Version 3.16.2
    Elementor Pro Version 3.16.0

    1. Greetings!

      The latest Elementor update created all kind of issues, so I haven't updated yet.

      I will update when it is stable, and then I will find the fix for this.

  9. Because of changes in current versions, previously provided solution is not working.

    I created something instead:

    ```document.body.addEventListener('click', function (event) {
    if ( ! event.target.closest('.e-n-menu') ) {
    let dropdowns = document.querySelectorAll('.e-n-menu-dropdown-icon-opened');
    dropdowns.forEach((el) => {
    let check_if_visible = window.getComputedStyle(el, null).display;

    if(check_if_visible == 'flex') {
    el.closest('li').click();
    }
    });
    }
    });```

    It's working.

Leave a Reply