Jump to content

Need help with CSS for Making Anchor Link Bold for Active States

Recommended Posts

I'm currently working on a portfolio website and I added anchor link index using a markdown block. I was able to figure out how to get a hover state going for each link (I'm hovering over "The Problem" link in pic), but I need help with:

1. Keeping the links bold after selection, and

2. Making sure the links become bold as I scroll through the page and the related sections show on screen. 

Thank you!

Screenshot 2024-02-19 at 2.22.50 PM.png

Link to comment
  • Replies 11
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 3/6/2024 at 10:02 AM, BridgetKelley said:

I'm having this problem as well! I would like it to stay bold on whichever section you are scrolling over. Let me know if this is something you can help with @tuanphan.

https://bldg-collective-2024.squarespace.com/projects

password: demo

Thank you!

Screen Shot 2024-03-05 at 10.01.38 PM.png

Scroll: I don't know this

Click: make it bold >> I can help with this

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
On 5/13/2024 at 2:14 AM, Charlie1 said:

@tuanphan Hello! Can you assist with this as well? I'm trying to have the active anchor link be underlined if possible. You're already an administrator on my site.

The specific page is: https://koala-ellipse-smgx.squarespace.com/archive

Please let me know!

The site is private.

It also shows no permission here

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/19/2024 at 7:11 AM, Charlie1 said:

Is your email still

Please remove my email from public forum. Thank you.

Try this code to Code Injection > Footer

<script>
var btnContainer = document.getElementById(".fe-663da8d0df7bff59847c62af");
var btns = btnContainer.getElementsByTagName("a");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }
    this.className += " active";
  });
}
</script>
<style>
  .fe-663da8d0df7bff59847c62af a {
    border-bottom: none !important;
    text-decoration: none !important;
}
.fe-663da8d0df7bff59847c62af a.active {
    text-decoration: underline !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/22/2024 at 7:40 AM, Charlie1 said:

@tuanphan Thank you so much! The underline for each link has been removed, but I'd still like the "active" link to have the underline. Is that possible?

Try change this line

var btnContainer = document.getElementById(".fe-663da8d0df7bff59847c62af");

to this

var btnContainer = document.getElementById("page");

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.