sticky sidebar

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

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  ⬇️

@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!

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  ⬇️

Thanks a lot, @paul2009! that's great!

2 question:

1. What do you mean by 'description block'?
2. How can I make this sticky option valid to desktop only? (above certain width) - so it doesn't interfere on mobile view.