Jump to content

Sticky Text Block

Go to solution Solved by Ziggy,

Recommended Posts

Hi,

I'd like my text box on my side bar to be fixed as I scroll.  I feel a little silly asking this since I've seen soo many results when I search this in Squarespace forum, however, I've tried almost all of them and I can't seem to get my text box to stick.  Any suggestions?

https://pelican-mayflower-36wy.squarespace.com

Password: Lincoln22

Page I set up is on the "Impact" page.

I was using my Squarespace ID finder and selecting the #block-id of the text for the CSS but maybe that's not the correct way?

Any help would be greatly appreciated!

Thank you!

Blayne

Link to comment
  • Solution

Try this new code, and move the block up towards the top of the section:

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

This method needs the .fe-block ID, not something I find with the block ID plugin, but something you can find by inspecting (F12):

image.thumb.png.8a0a15e9e361cd3100879ac0b76de67d.png

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

@BlayneG87 It looks like you have the top property set to zero PX in the CSS, if you set it to 120px it will not stick to the top of the page (underneath the header) but 120px lower (not hidden by the header).

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

Hi @Ziggy I was wondering if you would be able to help me once again?

My client has asked that I now eliminate the sidebar and make the text horizontal at top of the section.  I have tried applying the same principals for the sidebar, but I just can't seem to get my section to stick.  I've tried both creating a separate section and just targeting the text block id and nothing seems to be working.  Is there something different I should be doing?   Here is the code I'm using now:

//sticky horizontal nav
[data-section-id="638be36f99d1a11c19df1661"] {
  min-height: 0 !important;
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 0;
  z-index: 999;
}

[data-section-id="638be36f99d1a11c19df1661"] .content-wrapper {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

[data-section-id="638be36f99d1a11c19df1661"] .html-block {
  padding-bottom: 0 !important;
  text-align: center;
}

[data-section-id="638be36f99d1a11c19df1661"] .html-block p {
  display: inline-block;
  margin: 0 20px;
}

I'm making updates on the "About Us' page of the website.

Thanks!

Link to comment

I would add the single text block with the text in it at the top of the section, stretched full-width with the background property enabled. Then use basically the same CSS as previously. This will work if you reuse the text block currently on the page, if you add a new one you will need to find the new block code (the one that starts .fe-block, not currently findable via the chrome extension)

@media screen and (min-width:768px) {  
  .fe-block-yui_3_17_2_1_1669069934222_111987 {
    position: sticky !important;
    -webkit-position: sticky !important;
    top: 0;
    z-index: 999;
  }
}

 

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.