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: –
1 2 3 4 5 6 7 8 9 |
<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.
Anyway Know you know!