Jump to content

Recommended Posts

  • Replies 4
  • Views 339
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

IB2efExAlC.thumb.gif.8a37cdf95b40895ab8c1c6a6f3e20c67.gif

 

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
  • 1 year later...
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;    
}

image.gif.6f729d70a782cb2851302fa373e68264.gif

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 me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.