Elementor Mobile Menu not closing using anchors on a one pager SOLVED

17th October 2019

Jquery Misc

If you have problems with Elementor Mobile Menu not closing using anchors when using a sticky header then this will solve your problem.

Using Astra Template as the main theme I was using a child theme of that.

I created a one pager and added #about, #portfolio, #contactme in the menus as links to the anchor. This worked with no problems using a header with a logo that was on the left. But as soon as I used a logo that was centred and the links all underneath on a separate line the ability to use the mobile hamburger menu stopped working. When I mean stop working, I mean that the page would scroll in the background to the correct anchor link but the menu would not close.

I first tried to add the plugin “Insert Headers and Footers”, and added simple alerts. This would not fire any alerts, so it must have been taken over somewhere?

I deleted that plugin and tried “Astra Hooks” that you use within the Astra theme customizer. Again no joy as it was not firing!!!

So eventually I tried the most basic way of editing the footer and adding a HTML block and the following code: –


<script>
jQuery(function($) {
 $('.elementor-item-anchor').click(function() {
     $('.elementor-menu-toggle.elementor-active').click();
});
});
</script>

jQuery(function($) {

$('.elementor-item-anchor').click(function() {

$('.elementor-menu-toggle.elementor-active').click();

});

</script>

And guess what, it worked!!!

Heres a screenshot of the code in the elementor editor…
Why this was happening is a mystery as I have completed many header of one pagers but this was my first centred logo with a one pager.