Make Anchor Links In Main Navigation Bold When Clicked/Active

Site URL: https://torvic-design-solutions.squarespace.com/

Site Password: TORVIC

I am building a single page website and am using anchor links in the main navigation to jump to the different sections. However, I am struggling to write a piece of code to get these anchor links in the main nav to remain bold once they are clicked.

Any suggestions on how to get the anchor links to appear in bold once clicked (like in the screenshot attached)?

Many thanks in advance!

@gracemoore Here's an example of some JavaScript to do this. Add to the Code Injection FOOTER panel.

<!-- Highlight active section on Squarespace 7.1 --------------------->
<!-- Copyright Soundfocus Digital [https://sf.digital] --------------->
<!-- Use freely in your code injection. Do NOT re-publish.------------>
<script>  
  const navLinks = document.querySelectorAll('.header-nav-item a');
  const sections = document.querySelectorAll('section');
  function highlightNavLink() {
    let scrollPosition = window.scrollY + window.innerHeight / 2;
    sections.forEach((section, index) => {
      const sectionTop = section.offsetTop;
      const sectionBottom = sectionTop + section.offsetHeight;
      if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
        navLinks.forEach(link => link.classList.remove('active'));
        navLinks[index].classList.add('active');
      }
    });
  }
  // Listen for scroll events
  window.addEventListener('scroll', highlightNavLink);
  // Trigger function on page load
  highlightNavLink();
</script>

Did this help? Please give feedback by clicking an icon below  ⬇️

Many thanks for your help Paul! I have added this JavaScript to the code injection footer, do I also need to add some CSS code to make the links in the navigation bar turn bold?

Yes, that would help 🤦‍♂️.

.header-nav-item a.active {
  font-weight: bold;
}