Streaming live at 10am (PST)

CSS3 Position Sticky

Hey everyone, a little stuck here! I found this tutorial on forum for using CSS to make a sidebar sticky. After running through the tutorial here I’m a bit stumped! I’ve imported the Sticky CSS code into my custom settings and I can’t seem to get it working. If anyone can give me a hand I would so appreciate it! This has me scratching my head

Have you published your site? And the support table looks bad for this :confused: Unless you use JS for this?

I have it’s here:

This person did it correctly here:

Webflow also uses it on their video tab for navigation here:

1 Like


Thank you guys so much!

I ended up using this tutorial

Link doesn’t seem to be working.

Oh sorry! I copied the wrong link! The one above is correct!

Thank you this worked out perfectly for what I needed and the result was great!


bro! how did you get yours to work I still haven’t been able to lol

1 Like

thats so funny you got it to work! I love your website to it works great for that

1 Like

love the scroll and the menu slides to hightlight accordingly so nice! how did you do that too!!! Dude!!!

1 Like

Thank you! I realized I posted the wrong link twice. I used the link you showed me

First I put this into my head code in project setting so that it was site wide.

 .sidebar {
 position: -webkit-sticky;
 position: sticky;
 top: 0;

Then I put the an unordered list into a div that is set as flex child to 20% and named the divblock class sidebar just as it is in the code above. You could change the code to whatever your div class name is though. Finally, I just added the right amount of to the top and bottom so it sat flush with the sections I made.

As far as the highlighted menu, I just put list items in an unordered list element then a link text inside of each of those. Once that was done I created each section (res sec ind wrapper is the class) and gave it the appropriate ID for in-page linking then set each link in the unordered list to its respective section. Finally, I just made the current state section have a darker font and a 2px boarder on the left side. If you take a look at my read only link it’s pretty self explanatory but if you have any questions let me know and I can help you out!

Here is my read only link so you can see what I’m talking about

1 Like

Awesome! Thanks so much! It was the class id’s that I didn’t do correctly, thanks for the fast reply have a great night :facepunch::v:

1 Like