Make Blocks Sticky in Squarespace

[@mvelentzas]

Wow! You are a true legend! I asked for this a few days ago and you delivered. Pure class!

[@SEWebDesign]

No problem! Thanks for the suggestion!

[@katiemcgregor-blazewebdesign]

That was so useful... not ony for the 'making blocks sticky' but for also explaining the CSS so well. Thanks

[@SEWebDesign]

No problem! I saw you just watched the new update video as well, hopefully this background info on how it works behind the scenes helps!

[@davidallen-lawrence6878]

Fantastic tutorial, per usual. Thanks, CSE!

[@SEWebDesign]

I'm glad you liked it! Thank you!

[@hmg7871]

Thank you again, Chris!

[@SEWebDesign]

No problem! Thanks for always taking the time to comment when you enjoy a video!

[@dannievinther5312]

You should be able to use "clip" instead of "hidden" for the overflow-x or overflow-inline properties, if you have overflowing content while preserving the sticky effect

[@SEWebDesign]

Great tip!

[@DayaCurley]

Loved this!

[@SEWebDesign]

I'm so glad Daya!

[@zimmatron]

This was a fantastic tutorial.. not only for the content explained but just the way it was explained.. one question i have can you apply a sticky box to imagery or isit only in text form please?

[@SEWebDesign]

You can apply it to any block, not just text! Take a look at my latest video though. Squarespace just released a way to do this built in, without the need for CSS.

[@VisualVibration-b1v]

Hiya mate. Really appreciate the tutorial. I have one quick question. Is there a piece of code I can add to stop if from sticking at a certain point down the page. I've implemented it in a very similar way to what you've done here, but I want it to top a bit further up on the page rather than going right to the bottom of that section. Your help would be greatly appreciated! Thanks

[@SEWebDesign]

Unfortunately that is not possible. Position sticky inherently applies until the item reaches the bottom of its parent container.

[@LaineStyle]

Thanks so much for this video! I was just working on the client request for sticky blocks. Where would I find the CSS to implement it please?

[@SEWebDesign]

I have now added the link to the blog post with the CSS to the video description!

[@LaineStyle]

@@SEWebDesign you are amazing as always! :)

[@kata_designs]

Subscribed...Thank you so much, I had a quick question. I have a sidebar menu I'd like to make sticky throughout the whole page (not just a section). Is it possible to do this? They are button blocks. Thanks again!

[@SEWebDesign]

It really depends on the setup. Feel free to send me an email with the link to the page and so can take a look.

[@bluzh76]

Thank you for this, very nice! I have a question: are you now working exclusively with fluid engine? I feel it is still very buggy, especially with spacing. I have you free plug-in, which is helpful, but it is hard to pass on the page to a client, when there is so much more to check before saving a page :) Your 2 cents are much appreciated. thanks!!

[@SEWebDesign]

Yes I am working exclusively with fluid engine now. I am just doing my best to minimize any spacing concerns. Personally I don't use my extension on client sites either, that is best for individuals. Fluid engine still has a ways to go on the spacing front, but generally I can work around any issues that arise by playing with the grid spacing and block alignment in the section

[@bluzh76]

@@SEWebDesign It would be fantastic to see your workflow, or perhaps you already have a video? I'm still struggling with the fluid engine, but I understand it will be the future of Squarespace, so I'll have to get over it :) Thank you for all the work you do!!

[@Jazjay12]

yea you just gained a subscriber

[@SEWebDesign]

Awesome to hear! More good stuff coming!

[@YTillie2000]

Amazing Chris! Am wondering ...I normally use the chrome extension to identify blocks, but it doesn't include the .fe in the block ID, is this no longer a viable way to do this? Will #block-efe13c875785ef08f2b0 rather than .fe-block-efe13c875785ef08f2b0 .sqs-block format not work? Many thanks! I've been confused about this for a while ...

[@SEWebDesign]

The normal block ID still remains, so it is still a fine way of targeting a specific block. But it now resides inside of the element with the class of .fe-block-efe13c875785ef08f2b0. Since for position sticky to work, the sticky element has to be directly inside the tall parent container (in our case the grid is the parent), you can't use the block ID. You have to use the .fe-block-efe13c875785ef08f2b0.

[@YTillie2000]

@@SEWebDesign Thanks Chris! You did explain that in the video 😅 ...just me being easily confused and seeing both used lately.

[@EllenReichbart]

Hi there! Tutorial is great, unfortunately the code is also being used for Mobile, where the layout is much different.. is there anywhere to make this sticky on desktop only?

[@SEWebDesign]

Yes, check the blog post in the description!

[@Genesis2kx]

Is that Chrome extension to widen the Squarespace custom CSS window publicly available? Would love to try it!

[@SEWebDesign]

Unfortunately not, it's just for my recording tutorials. I'm not going to make it public because I don't want to have to worry about publishing updates for it as Squarespace makes updates to the editor

[@refreshed.memories]

is there any way to do this with a product image on the product page?

[@SEWebDesign]

Yes, you just need to target the gallery: .ProductItem-gallery and make it sticky.

[@PrintMamaArt]

hi do you have a tutorial on how to change the text color in Code Block?

[@SEWebDesign]

I don’t. But if you only want to change a particular code Blocks text color you could target the block id and then the paragraph inside it. Or you could give it an inline style in the html and change the color of just the one text color that way

[@TonyWebslinger]

Hi! Great vid! What if instead of a title can we use this on an image? What will the class be for that ?

[@SEWebDesign]

Yes, you can use it on any Squarespace block! Just look up the "fe-" class as I show how to do in the video

[@TonyWebslinger]

@@SEWebDesign thanks ! It worked 🔥🙌

[@kacielarson1139]

Hi there! This tutorial is super helpful, however I'm running into one issue. The block remains sticky so long as the top is set to "0." If I change that value, the block is no longer sticky. Any ideas why this might be happening? Thanks!

[@SEWebDesign]

It should be sticky as long as top is a positive value. You will also need to include a unit afterwards like px or vh. So try 50px for example. Now Squarespace has this feature built in with “pinning” I have a video about that on my channel

[@1deplatt]

I heard they were adding this feature natively in Squarespace

[@SEWebDesign]

Just saw that as a coming soon feature! No idea when it will be announced but really looking forward to it!

[@jillymonson]

I'd love to see how to set the z-index for a SECTION , so the next section rolls over it with scroll. Here's my sad attempt: [data-section-id="123456"] { position: sticky; top: 0; z-index: 100; } [data-section-id="789101112"] { margin-top: -50px; z-index: 101; }

[@SEWebDesign]

If you remove the z-index it should work. Sibling elements in a container automatically stack above previous ones without the need to set a z-index.

[@rolandvandenhout]

I agree with @mvelentzas... LEGEND!

[@SEWebDesign]

Thanks Roland!