CSS3 Position Sticky

Design help Custom code
1

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

https://preview.webflow.com/preview/sticky-scroll?preview=1caa9c37342aacca9788bdc6d3b366ab

2

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

3

I have it’s here:

http://sticky-scroll.webflow.io/

This person did it correctly here:
https://webflow.com/website/Example-of-Sticky-Left-Menu-for-cloning

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

1 Like
4

1138×285 11.1 KB

3 Likes
5

Thank you guys so much!

I ended up using this tutorial

http://sticky-sidebar.webflow.io

6

Link doesn’t seem to be working.

7

http://sticky-scroll.webflow.io/

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

8

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

http://inspacecreative.webflow.io/planner

2 Likes
9

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

1 Like
10

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

1 Like
11

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

1 Like
12

Thank you! I realized I posted the wrong link twice. I used the link you showed me https://webflow.com/website/Example-of-Sticky-Left-Menu-for-cloning

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

<style>
 .sidebar {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
}
</style>

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
https://preview.webflow.com/preview/inspacecreative?preview=d3550b3e31c79785b805d73fc0d71f36

1 Like
13

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