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

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!

Can you share link to this page? We can check easier

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!

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!

Scroll: I don't know this

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

Can you help with click make bold? but I only want whatever section is clicked to be bold. if you click another section I want it to unbold the other section.

@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!

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

@tuanphan I set it to be password protected. Passowrd: 2024

Also, I will send another email with contributor access now.

Thank you!

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>

@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?

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");

@tuanphan That worked! Thank you so much!!