Streaming live at 10am (PST)

Sticky menu that changes colour for it's respective section

Hi,

I built a small example of a sticky menu with its respective sections. What I would like to achieve is to have Section 1 in the sticky menu be a different colour when it is showing Section 1, and as you scroll down to Section 2 (or press it), the colour changes as well and now Section 2 will be coloured in the menu.

I hope my request makes sense.
Thanks for the help!
Philipp


Here is my public share link: https://preview.webflow.com/preview/sticky-272d2e?utm_medium=preview_link&utm_source=designer&utm_content=sticky-272d2e&preview=3b241700f6b45265068625408ffe755c&mode=preview

1 Like

Hi, just checking in again to see if anyone had some insights. @vincent @PixelGeek @samliew

Hi

Sorry didn’t understand what you try to achieve,
Ping me on Discord mati#9475, can have a quick call to understand your problem.

Hey @philippf, this is fairly straightforward to do.

You need to make use of the .current state -
Screenshot 2020-09-06 at 1.53.39 pm

Firstly, make all 4 of your text links the same class (i.e. .link), because at the minute you have .link, .link-2, link-3 etc. This means you will only have to apply styles once, not four times -
Screenshot 2020-09-06 at 2.00.54 pm

Next, wrap your section content (on the right-hand side), in 4 different div blocks. Give each of these div blocks a different element ID, such as #section-one, #section-two #section-three etc. -
Screenshot 2020-09-06 at 1.59.32 pm

Once all your div blocks on the RHS have a unique ID, you can then link the text links on the LHS to scroll to each div block/section. So, the text link saying ‘Section 1’ will be linked up with #section-one and so on. -
Screenshot 2020-09-06 at 2.02.48 pm

Then you can apply different stylings to the .current state, such as changing the text colour. So whenever that text link is clicked and/or that div block/section on the RHS is in view, the text links will be a different colour.

1 Like

oOoOoOoOoooo this is great! Thanks so much, Oli. I’ve gone ahead and made those changes. It’s working great. I’ve decided to showcase this as it will be useful for others.

2 Likes

Hi Mati, thanks for the support. I’ve found a solution!

You’re very welcome @philippf!

Please can you mark my answer as the solution so people know your problem has been solved. Thank you :smiley:

Done! Thanks again :slight_smile:

1 Like