How to get sidebar menu to change color/size on scroll

Hi, this seems like a great place to get tips and answers! So I’m trying to create a sticky menu where the text will change in color and size on scroll. I tried the “while page is scrolling” trigger and it’s not allowing me to keep the text left aligned. See image below. The scale makes it extend outside of the rest of the text. I want it to be left aligned but bigger. Any help is appreciated! Thank you!!!

Helloo :smiley:

I think the easiest way would be to give for every section a ID and then, create a link text to be your sidebar and when click it goes to the selected section.

When you are in the current section of specific link, you will see on the link the word Current
Screenshot 2023-08-24 at 07.56.24

So, you can change the element style as you would like to have

Here, I made a example for you

I sent you a connection on Linkedin, if you need, you can contact me there :slight_smile:

If it works, set this comment as solution also!


Thank you for your recommendation! I actually don’t want them to be clickable. It’s actually supposed to change on scroll if that’s possible to do.


Right, so, I still recommend doing the same, and then it will work just fine and smoothly, you do not need to worry of further adjustment since this will be adjusted by the section.

If you do not want to be clickable, you create an absolut div and set the height and width to 100%, so it will block the clickable thing. Follow example:
Screenshot 2023-08-25 at 06.59.21

Thank you so much! This is where I’m at currently. Can you let me know if I have the interactions set properly for my side menu? It’s my first time really trying to learn how to use it. I’m also not sure why it’s not showing the text color during the Live preview.

heey :smiley:

For this example you do not need animation, it will be easier if you do as links to the sections.

Follow the steps:
1st create an ID for every section that will be in the sidebar menu. For example the hero section
Screenshot 2023-08-25 at 08.45.45

2nd click on the link you want to set the link (menu-links) settings and select the regarding section
Screenshot 2023-08-25 at 08.46.56

3rd do not design the text box inside of the link, all design of the letter shall be in the menu-links class

4th When you set it, you will see the “current” class on the about me link when you will be on the section

5th You can change the design regarding you would like too, and it will only be designed when you achieve the section

6th If you want disable the clickable behaviour, create a div called blocked inside of the links-wrapper, set this div called block as display: absolute, width: 100%, height 100% - Anytime you want to manage the links, you just hide this div and to disable the click you display this div again.

If you want, we can chat it on linkedin, just send me a message there and we can fix it together :smiley: