Sticky menu that changes colour for it's respective section

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