Jump to content

Help with CSS for Making Anchor Link Bold for Active States

Go to solution Solved by Lesum,

Recommended Posts

Posted

I'm currently working on a client's 7.0 site and I added an anchor link index using a text block along the left side. I would like help with:

Making the link bold upon clicking and keeping the links bold after selection

OR

Making the links become bold as I scroll through the page and the related sections show on screen and keeping the link bold after selection. 

Thank you!

Page link: https://www.insightrecovery.com/inr-patient-guides/

Screenshot 2024-11-21 at 4.03.04 PM.png

  • Replies 2
  • Views 137
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution
Posted

Hi @mavencreative, To make anchor links bold upon click or selection, add this code under Website > Pages > Website Tools > Code Injection > Header.

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const container = document.getElementById("block-yui_3_17_2_1_1727218004037_6070");
    
    if (container) {
      const links = container.querySelectorAll("p a");
      
      links.forEach(link => {
        link.addEventListener("click", () => {
          links.forEach(l => l.classList.remove("active"));
          
          link.classList.add("active");
        });
      });
    }
  });
</script>

<style>
  #block-yui_3_17_2_1_1727218004037_6070 a.active {
    font-weight: bold;
  }
</style>

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Posted

Amazing! Thank you! That worked great. 

Just out of curiosity, is there a way to make the links in the right side menu highlight or become bold as each section comes into view while scrolling through the content?

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.