Jump to content

Make text block sticky

Go to solution Solved by Ziggy,

Recommended Posts

Site URL: https://electricinside.squarespace.com/travel

Hi there,

I'm wondering if anyone can help me make a text block on the side of a page sticky?

I have this block on the left side of the page which is functioning as a navigation bar with links to the text. I would like to make it sticky so that it stays in place as you scroll down the page.

I've read quite a lot on how to do this (targeting the block then adding position: stick etc) but for some reason nothing I try seems to be working. 

Any help would be much appreciated!

2022-12-08 22_55_35-TRAVEL — Electric Inside Boats.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

 You can try adding this to your Custom CSS:

@media screen and (min-width:768px) {  
  .fe-block-13cffe00b613f59e5772 {
    position:sticky;
    top:120px;
  }
}

You need to use the .fe-block- class rather than the block class.

Let me know if that works!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Very close! But it's the unique block class you want for this operation (highlighted yellow):

image.png.1f49831878d9b45be2bd72dee5dca2d1.png

Since it's a class you want to use a period in front. i.e. .fe-block-.........

In most other CSS situations that id you highlighted in red works just fine.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.