Joleanna Posted February 17, 2022 Share Posted February 17, 2022 Site URL: https://www.joleanna.com/the-blog/sydney-nicks-wedding-painting Hi, I'm trying to custom make a sticky side-bar for the side of my blog so that that when the reader scrolls the newsletter block, future summary blog blocks, and all that stays in view. Is this even possible on 7.0 Brine without an expensive plug-in? thanks a million Link to comment
paul2009 Posted February 17, 2022 Share Posted February 17, 2022 46 minutes ago, Joleanna said: I'm trying to custom make a sticky side-bar for the side of my blog so that that when the reader scrolls the [sidebar] stays in view. Hi Joleanna As you've already added a column to the blog for the sidebar that takes up 3 of the available 12 columns, you should be able to make these 3 columns sticky by adding something like this to Design > Custom CSS: .Main--blog-item .sqs-col-3 { top: 103px; position: -webkit-sticky; position: sticky; } It targets just this 3-column sidebar on blog items only. Let me know how you get on. Paul Did this help? Please give feedback by clicking an icon below ⬇️ About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
Itamar Posted March 12 Share Posted March 12 @paul2009 any way I can make a sticky sidebar that will work to all similar elements? (all portfolio items have the same layout of images gallery and text block, want to make all those text blocks sticky). Website URL: https://quillfish-star-szda.squarespace.com/ Pass: ForumQ311 Thank you! Link to comment
paul2009 Posted March 12 Share Posted March 12 22 minutes ago, Itamar said: any way I can make a sticky sidebar that will work to all similar elements? You can achieve this by applying the same CSS styling to the Fluid Engine block that you want to remain in place. It would be a good idea to duplicate the title in the 'description' block so that the title and description are in the same block and will remain together on desktop. For example, if you add the title to the other block, and add this CSS it will be as illustrated below. .fe-block-c34fe7d013e84b560ea6 { top: 96px; position: -webkit-sticky; position: sticky; } You can then hide the separate title on desktop, so that it only appears at the top of the page on mobile. Did this help? Please give feedback by clicking an icon below ⬇️ About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
Itamar Posted March 12 Share Posted March 12 Thanks a lot, @paul2009! that's great! 2 question: What do you mean by 'description block'? How can I make this sticky option valid to desktop only? (above certain width) - so it doesn't interfere on mobile view. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment