Sticky Text Block

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

@Ziggy Thank you!  I got my text block to stick but it sticks on the 3rd line item "Partnerships" instead of at the top "Topics".   Any ideas why it would do that?  Appreciate the help!

@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).

Amazing!  That did the trick.  Thank you @Ziggy!

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!

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;
  }
}