How to Make a Text Block Sticky in Squarespace 7.1
Ensuring an excellent user experience becomes increasingly important in modern web design, and sticky text blocks are a good way to do that. In this tutorial, we’re going to demonstrate all the ways to make a text block sticky in Squarespace 7.1, allowing you to pin special announcements, priority CTAs, promotions, or key messaging that never leaves the viewport as the user scrolls.
What Is a Sticky Text Block?
A sticky (or fixed-position) text block that remains visible even as a user scrolls the page. It’s particularly useful for:
Highlighting promotional content
Keeping CTAs always visible
Providing constant context or instruction
Making long pages more interactive
What You’ll Need
A Squarespace 7.1 site
Access to Pages → Custom code → Custom CSS
A basic understanding of how to inspect elements in your browser
Step 1: Identify Your Text Block
Open your Squarespace site in your browser.
Navigate to the page with the text block you want to make sticky.
Right-click on the text block and choose Inspect.
Look for a block ID that looks like this:
id="YOUR BLOCK ID"
Copy this full ID—you'll use it in your CSS.
Step 2: Add Custom CSS to Make It Sticky
Go to Pages → Custom code → Custom CSS and paste the following code:
/* Sticky Text Block */
#YOUR BLOCK ID{
position: sticky;
top: 100px;
z-index: 999;
}Be sure to replace the block ID with your own.
Optional: Make It Desktop-Only
If you want the sticky effect only on desktop devices:
@media screen and (min-width: 768px) {
#YOUR BLOCK ID{
position: sticky;
top: 100px;
z-index: 999;
}
}Pro Tip: Use with Two-Column Layouts
Sticky text blocks are especially effective when used in side-by-side layouts:
One column with text (set as sticky)
One column with scrollable content (like an image gallery or product info)
Make sure the text block’s container section is tall enough for the effect to be visible.
Common Issues and Fixes
| Issue | Solution |
|---|---|
| Sticky not working | Ensure the parent container doesn’t use overflow: hidden |
| Text overlaps with the header | Increase the top value to create enough space |
| Doesn’t work on mobile | Use media queries to disable on small screens |
Final Thoughts
Sticky Text Blocks are a modern and user-friendly element for your Joomla site made with Squarespace in mind. Whether you're pitching a deal, showcasing a product, or guiding visitors, content keeps you visible and engaged with your audience, which often results in higher conversions.
You’ve learned how to make any text block sticky in Squarespace 7.1 with straightforward, actionable custom CSS by following along with this guide.
Frequently Asked Questions
-
Sticky elements remain in the position they are in the natural flow of the layout, but they stick to the screen as the user scrolls. Fixed elements are always tied to an onscreen position. Sticky is great for when you just need something to be temporarily visible in its parent.
-
The most common causes are:
Because parent container overflow: hidden (..it turns off the stickyness)шибка).
The section isn’t long enough to be scroll-interactive.
The CSS Selector ID is invalid or empty.
Check these first when troubleshooting.
-
Open your page in a browser → right-click on the text block → choose Inspect → look for the element with an ID like block-yui_3_17_2_1_.... Copy and use that in your CSS.
-
Yes. Use a media query like this:
@media screen and (min-width: 768px) {
#YOUR BLOCK ID{
position: sticky;
top: 100px;
}
}
This ensures the sticky effect only runs on screens wider than 768px.
-
StickyNoteDistanceTop The value of the top value of how far from the top edge of the window the block should "stick". Try 80px–120px to clear your site’s fixed header and then adjust based on what looks good for spacing/visibility.
