Keep a section link button active until other button is clicked on the same page

Hi there! I am building my portfolio on webflow and have section links to lead to specific parts of the projects (within the same page).

I have added a hover interaction to the buttons and would like for the buttons to stay pressed as long as the user is on that section.

If they scroll passed into a new section or if they click the button to another part of the page I’d like for the button related to the new section to be highlighted.

Can’t seem to find an answer on the forum and when playing with pressed or focused states nothing is happening.
If anyone knows how to do it, it’d be amazing, thank you!

Here is my public share link where you can see an example of what I mean :slight_smile: :

1 Like

You know how you edited your main navbar text to turn red when on that current page? Same concept for sections except there’s a little bug where the green “current” state doesn’t show if you already have your section link selected when scrolling to the section.

What you have to do is scroll to the section first, then click on the corresponding section link in the navigator to edit it (current state on the right should be visible).

Last step would be to wrap your sections and update the in-page linking so that the link stays pressed.

Might have to start charging you :joy: (kidding ofc)


Ahahah you might have to! :joy: :joy: :joy:

Thanks for your response, I wrapped my sections and updated the in-page linking and it worked, nifty trick that is!! One thing though: I am able to modify how the section link looks but not how the text section within it does — is that normal and I just have to deal with the text staying black or could I turn it white when the section links are pressed?

Thank yoooou! :slight_smile:

You can turn it white, you’ll just have to redo your section links and use the text link element to style your links instead of the link block element. Lmk if you run into any issues.

1 Like

I remade my section links but still ended up styling them rather than the text element. Just used a simpler design in the end and think it works :slight_smile: Thanks again!!

(last little question which just came up trying to fix things and maybe I can ask — the nav bar has the opacity change o the logo and my name, but when changing pages it always glitches and for a millisecond you can see the overlay, do you have an idea what may be causing it? I tried playing with time delays but it wasn’t working, but then again i’m not that practical with it yet!)

Changing the opacity to 0% should fix this issue :slightly_smiling_face:

Feel free to reach out if you’d like me to help with anything else!

1 Like

Aaaah you truly have all the answers Chris! Thank yooou.

Ok, last thing (i hope!) - the navigation bar is a couple of pixels higher on the landing page versus the others, but I don’t understand why as it’s a symbol and should have the exact same positioning… do you have a magic answer? (I actually feel bad asking this extra question ahah) Thanks for being so kind!

No problem! I’ll start a message chat with you so that this thread stays relevant to original topic for others searching.

1 Like