- This topic has 2 replies, 2 voices, and was last updated 1 week, 3 days ago by
.
Hi Shufflehound Support Team,
I’m using the Javelin theme for a single-page website. I’ve set up section links in the main navigation menu so visitors can jump to sections on the homepage.
The issue I’m having is that all the menu links appear to be active at the same time when I’m on the homepage. They all show their hover/active state together, instead of only the link for the current section.
Is there a way to disable this behavior or fix it so only the correct link shows as active based on scroll position?
Please let me know what you recommend.
Thank you!
I went ahead and provided the login info so you can do in and take a look to see what’s going on.
Hello,
Thanks for providing access!
We’ve added a small custom JavaScript snippet to help with the issue you described. It ensures that only the correct menu item stays active based on the current URL hash (e.g., #about, #contact) and prevents all menu links from showing as active at the same time:
if (document.body.classList.contains('home')) { const currentHash = window.location.hash; document.querySelectorAll('li.menu-item.current-menu-item').forEach(function (item) { const link = item.querySelector('a'); if (!link) return; const href = link.getAttribute('href'); if (currentHash && href.endsWith(currentHash)) return; item.classList.remove('current_page_item'); }); }This script is already applied and should fix the visual conflict with the active menu items on the homepage.
Let us know if you need further adjustments!
Best regards,
Shufflehound Team
