Creating a sticky layout - Webflow Tutorial

How to use position sticky to create a vertical layout in Webflow.
In this video we will create a layout thats great for scrolling through cards on a vertical layout.
▶ Sign Up for Webflow (affiliate): webflow.grsm.io/caleredwards
New Videos Every Tuesday & Thursday!
Have a Great Day! Join the Notification Squad: click the bell 🔔
Subscribe: ruclips.net/user/CalerEdwa...
Learn UI/UX Design and Adobe XD 👩‍💻👨‍💻(60% OFF)
Learn: www.udemy.com/ui-ux-design-us...
Join the channel and become a Member ❤️
Get exclusive content from me and help support the channel.
Join: / @caleredwards
SOCIAL: @CalerEdwards 💙
Dribbble- dribbble.com/CalerEdwards
Instagram- / caleredwards
Twitter- / caleredwards
Behance- behance.net/CalerEdwards
Website- caleredwards.com
Hangout on the Discord server! 💜
Discord: / discord
▶ Music: Epidemic Sound 🎹
#Webflow #CalerEdwards #NoCode

[@josephgraham6098]

Your tutorials are so damn good. Thanks for making these and keep up the fantastic work!

[@BezUmiaru]

Mate! Amazing tutorial and approach how you do it, build it, everything! Please keep going!

[@mr.webdev3700]

Cool layout! Keep it up!

[@danbernaldev]

Great tutorial master! Thanks a lot!

[@qiaochunwei6546]

this is very helpful, thank you!

[@michaelng1990]

so damn great man, really helpful and understandable. Keep it up!

[@IgorPinheiro]

Great tutorial bro! Thanks a lot!

[@oricknogueira]

Sou Brasileiro e rodei esse youtube para aprender a fazer essa integração, parabéns, é meio difícil aprender sem saber inglês, mas consegui, obrigado pelo tutorial!

[@Tusiime01]

perfect man, thanks

[@musadiqmaqbool5203]

Very nicely explained.

[@ady2266]

THANK YOU!

[@daerickmanner8016]

hands down the best tutorial about sticky!

[@CalerEdwards]

Wow, thanks!

[@servantproductions6026]

how would this work for mobile? im doing this but on mobile they are still side by side and its too small.... is there a way to make the sticky side sit on top while the right side is centered?

[@patrykzdziabek2601]

You rock Caler!

[@CalerEdwards]

Thanks! :D

[@lusialwiindi877]

Smashed it! Good job dude, tried it out and looks great... you also covered off z-indexing without meaning to! Thanks

[@CalerEdwards]

Glad you liked it!

[@samli40]

Thanks!! Hopefully, we can see more of Webflow animation and layout tutorial.

[@CalerEdwards]

More to come!

[@iDATUS]

@@CalerEdwards hope so

[@vadimshakaev]

Hi! Thank you for tutorial! Why don't you use a container with max width instead of div block?

[@mbilalasgher-bk7520]

Thank You :)

[@KrishnaManohar8021]

Can u develop navigation bar too?

[@Alexander-cd9zx]

Great tutorial! Does this work well for mobile version also?

[@bashar_me]

Nice one Caler. We want to see more layout video.

[@CalerEdwards]

You got it!

[@dennisziegler3829]

4:44 is where the magic happens

[@AS-ld5mz]

thanks, how do you add headings, txt etc without having to drag it from the left panel? this is so much easier

[@garyvoigt321]

Great one!

[@CalerEdwards]

Thanks!

[@JuanRojas956]

Is there a way to centre the 'right-card' horizontally in the page and then having 'left-card' just take up the remaining space available?

[@RaziRefiRafeek]

Can you do something like a nav-bar on the side? Same layout but like with links to different sections to the page and also highlighting that section title.

[@themikias]

Yes, you can replace this sticky div with an actual nav and style it, give an ID to each section you want to scroll to, and then assign each link in the nav to the IDs you gave. Good luck!

[@christopherklaich55]

How does this work with different views such as mobile?

[@uncleanAlibertine1]

great

[@brendanvanbiljon3861]

When I create the div block @ 3:56 it doesnt go full width of the screen but rather the width of the main container. How do I fix this seeing that I selected Body

[@florencia_ds]

Thank you for the amazing tutorial. Can you please make more Webflow vids? 💜

[@CalerEdwards]

More to come!

[@kunalbelamkar]

How do I do this with a image in the back? Like I text to come up of the image as I scroll

[@Lortsaf]

Does it look the same on mobile?

[@ccCat888]

How to make a mobile version of this...?

[@juliuschooi6008]

can we have a sticky horizontal progress bar/breadcrumb on scroll?

[@CalerEdwards]

I will see what I can do :D

[@sebastianarocena4438]

GOD

[@intjdrew]

having trouble with luxy.js and sticky. sticky not working with it

[@traducandinromana3567]

cool

[@CalerEdwards]

Thanks :D

[@traducandinromana3567]

@@CalerEdwards ヾ(^▽^*))) I was wondering How to do that.

[@tomr.6107]

Does this program give you the code as well?

[@CalerEdwards]

Yes! You can export the code if you have the right account plan.

[@p.sethia1830]

how does this work on mobile? how does the responsive aspect work?

[@shaykhjake9877]

I find that it it is best to clear out the stickiness at the break point for mobile. At that point, there is simply too much to try to fit on a screen. You'll need to reduce a lot of the padding and adjust the design to look nice on mobile.

[@ianinspiredworks6760]

Hey Caler. I have followed this video to the letter, watched it twice and still it does not provide me with a sticky element. I have 100% followed the instructions, is there anything on the wider site that could be causing this issue?

[@Oli_Timmis]

Make sure none of your parent elements are set to 'overflow: hidden'. This causes 'position: sticky' to stop working.

[@brendanvanbiljon3861]

Give your Left class a Max height. About 500px

[@keeganmorris4008]

Way late but might help someone: I was having a similar issue until I adjusted the vertical-align settings on main container to "start" instead of "stretch"

[@Ludvio]

@@brendanvanbiljon3861 Thank you guys, that was really helpful

[@RuthandEric]

This doesn't work anymore...

[@tanczosandras599]

4:42 what you came for

[@projectwebflow1052]

web flow vs code which is better u think

[@jessicaeleanor6294]

I swear I try this and my webflow just doesn’t do this, I can only achieve the effect using fixed but then my footer looks weird.

[@jessicaeleanor6294]

Oh! I think it’s because I didn’t give my left div an appropriate height