Make Blocks Sticky in Squarespace
HTML-код
- Опубликовано: 11 сен 2024
- Make Blocks Sticky in Squarespace - In this video I show you how to create sticky blocks in Squarespace using only a few lines of CSS.
Get the CSS:
schwartz-edmis...
Sign up for my free Squarespace CSS for beginners eCourse:
schwartz-edmis...
Learn to create custom layouts in Squarespace!
schwartz-edmis...
Get my giant library of CSS and Code Snippets for 7.1!
schwartz-edmis...
My goal is to help you create more custom Squarespace websites so that you can charge more for your services.
If you need help designing, updating, or implementing custom code on your Squarespace website, you can hire me to do so through my contact page:
schwartz-edmis...
If my content has helped you out I would really appreciate a small donation to allow me to keep making tutorials:
schwartz-edmis...
Save 10% off your first subscription of a Squarespace website or domain by using code PARTNER10. (This is an affiliate link, so if you end up setting your website live I will receive a small commission!)
squarespace.syuh.net/sewebdesign
Music: / justin-kolas
That was so useful... not ony for the 'making blocks sticky' but for also explaining the CSS so well. Thanks
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!
Wow! You are a true legend! I asked for this a few days ago and you delivered. Pure class!
No problem! Thanks for the suggestion!
Fantastic tutorial, per usual. Thanks, CSE!
I'm glad you liked it! Thank you!
Thank you again, Chris!
No problem! Thanks for always taking the time to comment when you enjoy a video!
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
Great tip!
yea you just gained a subscriber
Awesome to hear! More good stuff coming!
Loved this!
I'm so glad Daya!
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?
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.
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?
Yes, check the blog post in the description!
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
Unfortunately that is not possible. Position sticky inherently applies until the item reaches the bottom of its parent container.
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!!
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
@@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!!
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!
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.
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 ...
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.
@@SEWebDesign Thanks Chris! You did explain that in the video 😅 ...just me being easily confused and seeing both used lately.
Hi! Great vid! What if instead of a title can we use this on an image? What will the class be for that ?
Yes, you can use it on any Squarespace block! Just look up the "fe-" class as I show how to do in the video
@@SEWebDesign thanks ! It worked 🔥🙌
Is that Chrome extension to widen the Squarespace custom CSS window publicly available? Would love to try it!
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
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?
I have now added the link to the blog post with the CSS to the video description!
@@SEWebDesign you are amazing as always! :)
is there any way to do this with a product image on the product page?
Yes, you just need to target the gallery: .ProductItem-gallery and make it sticky.
I heard they were adding this feature natively in Squarespace
Just saw that as a coming soon feature! No idea when it will be announced but really looking forward to it!
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;
}
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.
I agree with @mvelentzas... LEGEND!
Thanks Roland!