Hey @indigojones66
Okay, so the root of the problem is that:
On https://greenlions.com, clicking a mobile menu link like https://greenlions.com/#testimonials scrolls to the anchor without reloading the page, which is normal behavior, but the mobile menu stays open, which is not ideal UX.
On the other hand, in the test site https://tottenhamtwist.com, the anchor links use http://tottenhamtwist.com/#top, notice it uses HTTP and not HTTPS in the anchor links, which triggers a full page reload (because of the protocol mismatch), and that naturally closes the menu.
Since this behavior is built into how the theme handles anchor links, it can’t be solved without modifying the theme’s JavaScript or adding custom code to close the menu manually on link click.
Also, please don’t use HTTP links, it’s not recommended for live/secure sites
May I know which theme you are using?
Hi, well spotted. I am using Intuition Pro which is no longer supported
Since the theme is no longer supported, and this behavior is built into how it handles anchor links on menus, unfortunately there’s no built in setting to change this.
Switch to an actively supported theme that handles this better out of the box.
Also, just a reminder, please don’t use HTTP links in the menu, even if they do “work” they can cause issues later and are bad for SEO and security.
is there no css I can use to solve this? Or JavaScript
Assuming you have a plugin for injecting JavaScript all setup, you can use the following JS snippet.
I have also provided the explanation of what each line does within the code.
// Wait for all the site content to be loaded before doing anything.
document.addEventListener('DOMContentLoaded', function () {
// Select all anchor links inside #menu-mobile.
const menuLinks = document.querySelectorAll('#menu-mobile a');
if (! menuLinks.length) {
return; // No #menu-mobile links found.
}
// Loop through each menu item and add a click event listener.
menuLinks.forEach(function (link) {
link.addEventListener('click', function () {
// Remove the class from the body (effectively closing the menu).
document.body.classList.remove('menu-mobile-active');
});
});
});
Also, since you are scrolling to the content on the same page you can consider using smooth scrolling.
Add the following to the CSS.
html {
scroll-behavior: smooth;
}
could not be saved as error on line 2:
const menuLinks = document.querySelectorAll('#menu-mobile a');
The JavaScript code is valid, I have tested it on the provided site from developer settings. So, can you check again? Please ensure that you are writing JavaScript code separately from the CSS code (this requires using some plugin).
Maybe check if the code is copied properly, and the '(quotes) are not replaced with curly quotes (like these “”).
Also, a more descriptive error or screenshot will be helpful.
Got it! You are writing JS code directly inside functions.php file which wont work. However, since you are able to modify functions.php you can add the following to the end as in the screenshot.
/**
* Custom JavaScript to close the mobile menu on anchor click.
*
* @return void
*/
function my_custom_menu_enqueue_script() {
wp_register_script('custom-menu-script', '', [], false, true);
wp_enqueue_script('custom-menu-script');
$inline_script = <<<JS
// Wait for all the site content to be loaded before doing anything.
document.addEventListener('DOMContentLoaded', function () {
// Select all anchor links inside #menu-mobile.
const menuLinks = document.querySelectorAll('#menu-mobile a');
if (! menuLinks.length) {
return; // No #menu-mobile links found.
}
// Loop through each menu item and add a click event listener.
menuLinks.forEach(function (link) {
link.addEventListener('click', function () {
// Remove the class from the body (effectively closing the menu).
document.body.classList.remove('menu-mobile-active');
});
});
});
JS;
wp_add_inline_script('custom-menu-script', $inline_script);
}
add_action('wp_enqueue_scripts', 'my_custom_menu_enqueue_script');
Hi Lakshyajeet, thank you again for all your help.
I added your last bit of code and still received error on the same line. I then installed a javascript plugin and it all works fine now. Thank you so much . Regards Garry
I’m really glad to hear it’s working now!
Best regards,
Lakshyajeet
