Close the Mobile Menu After Tapping an On-Page Link
Closes the Navigation block's full-screen mobile menu when a visitor taps a link to a section of the same page (like #pricing), so they actually see where they jumped to.
Opens WPIDE on
Code
document.addEventListener('click', function (e) {
var link = e.target.closest ? e.target.closest('.wp-block-navigation__responsive-container.is-menu-open a[href*="#"]') : null;
if (!link || link.pathname !== window.location.pathname || !link.hash) { return; }
var container = link.closest('.wp-block-navigation__responsive-container');
var close = container && container.querySelector('.wp-block-navigation__responsive-container-close');
if (close) { close.click(); }
});Notes
For block themes using the Navigation block. Links to other pages work as before.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.