Mobile Menu not closing in anchor tags

Hi @guadster,

Is adding only the #targetID, working for you?

Kind regards,
Herman ??

Hey, thanks for the reply.

What exactly do you mean? The anchor tag is working and it jumpls correctly to it. But the menu isnt closing when you jump to it from the navbar like it should.

https://wirtzkraxenberg.at

The menu point “Speisekarte” opens a point “mittagsmenü”, if you click that on the homepage you get a terrible user experience.

Hi @guadster,

I meant something like this.

Please let us know how you go.

Kind regards,
Herman ??

Hey, thanks for the reply. Still, that has nothing to do with the issue i described. Its not about the linking. Its about closing the menu afterbits gets clicked!

I am sorry, I just noticed that your site is using a custom Header created using Elementor.

Would you please try temporarily switching the theme to a default Twenty theme series and see how the Menu works on a default theme?

Please let us know how you go.

Kind regards,
Herman ??

Hey, i switched it since the astra header didnt work. That issue is known though and i have had it on many sites. Is there really no solution for it? I ve read in many forums about it, but nowhere is a definitve solution. Do you maybe have custom code that closes the menu when you click on the links, but not if there is a submenu for example?

Hi @guadster,

Yes, this is a known issue and our team is working on the fix. We are sorry for the inconvenience you may have because of this.

Using Astra default Header, if you add only the #targetID as I mentioned in my previous response, the mobile menu should closed when the menu item gets clicked. However, it will work only in the case that your site is a one-page site.

Well, please add the following snippet to your site and change the Header Type from the Off-Canvas section to either Flyout or Ful-Screen. See if it does the trick.

<script>
    jQuery( 'li.menu-item a' ).on( 'click', function() { document.getElementById( 'ast-mobile-popup' ).classList.remove( 'active', 'show' ); document.getElementsByTagName('body')[0].classList.remove( 'ast-popup-nav-open', 'ast-main-header-nav-open' ); jQuery('.main-header-menu-toggle')[0].style.display = 'flex'; 	jQuery('.main-header-menu-toggle')[1].style.display = 'flex'; } );
</script>

I hope it will help.

Kind regards,
Herman ??

Hi @guadster,

Just wanted to give you an update that we have fixed this on Astra v3.8.3. We are sorry for the long wait.

Let us know if you need more help, otherwise please mark the topic as Resolved.

Kind regards,
Herman ??