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:
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. 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.
17 Responses
Hi,
Thanks for the code but can we apply it to menu links instead of clicking outside.
Yes, I have a tutorial for that here : https://element.how/elementor-close-toggle-menu-on-same-page-anchor-links/
This is great! Thanks! You could also use on mouseleave if you don't want people to have to click to close.
Hey! I could't make it, can you help me out? I did what you say android not worked.
Got a URL where you have the code setup and it's not working as it should?
Do you have updated code for the new elementor menu module with the mega menu?
http://clients.gkbsolutions.com/whgreene/website/
Hey!
Updated the tutorial with the code for that.
Cheers!
Thank you! The new code works great.
How can we close one menu (mega menu) when we open another menu (mega menu) in the same header?
The mega menu works like that by default...
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.
Well to be clear I'm talking about other sub menu, in the same mega menu element. Do you have multiple mega menu elements?
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).
@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.
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
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.
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.