Custom Line of Text Above the Navigation in Squarespace
There are times when you find yourself wanting to insert a simple, easy-to-manage line of text across the top of your site’s navigation for a special holiday message, maybe a promotional announcement, or any other simple greeting, without having to inject the HTML or change actual page markup.
If you’re on Squarespace 7.1 and you’d like a non-heavy (or no-code-injection) way of doing this, you can do it with one line of CSS, using the before pseudo-element on your navigation bar.
Here’s what it looks like done properly (and responsively), building on the code you’ve given us.
Base Code
This is the basic CSS snippet you're using:
.header-nav:before {
content: "enter your text";
display: block;
position: relative;
top: -20px;
}
It works, but let’s improve it for:
Better layout stability
Centered alignment
Readable styling
Cross-device consistency
Improved Professional Version
.header-nav::before {
content: " Free shipping on orders over $50!";
display: block;
position: relative;
top: -20px;
text-align: center;
background-color: #f4f4f4;
color: #333;
font-size: 15px;
padding: 10px 0;
font-family: inherit;
z-index: 999;
}
Key Enhancements
| Style | Purpose |
|---|---|
text-align: center; |
Align the message neatly above your nav |
background-color & color |
Ensures visibility and brand consistency |
padding |
Adds breathing room for aesthetics |
font-family: inherit; |
Keeps consistency with your site typography |
z-index: 999; |
Prevents overlapping issues with sticky headers or dropdowns |
Optional: Mobile Adjustment
To hide the text on mobile or change the font size:
@media screen and (max-width: 768px) {
.header-nav::before {
font-size: 13px;
padding: 8px 0;
top: -10px;
}
}
Important Notes
This method is CSS-only, meaning you cannot add links, styling, or dynamic content inside the message.
For more advanced functionality (dismiss button, clickable CTA, etc.), it's better to use HTML injection + CSS.
Final Thoughts
Using: before on .header-nav is a fast and simple way to add a non-interactive announcement above your menu in Squarespace 7.1. It’s best suited for:
Static promotions
Limited-time offers
Visual notices that don’t require clicks or interaction
Need more flexibility? Consider combining HTML code injection with custom CSS for full control.
Frequently Asked Questions
-
Yes! You can also achieve this using a plain CSS block targeting the :: before pseudo-element of .header-nav for a simple line of text above your navigation (no code injection!)
-
By default, yes. However, with CSS you could modify it (also font size??), or you could hide the message on smaller resolutions if you want.
-
No. However, as this is based on CSS only, the text isn't interactive. To add links, buttons, or dismiss behavior, you need to add your HTML by scripting custom CSS and, possibly, JavaScript.
-
Not significantly. A better solution would be the following, which takes advantage of relative position, padding, and the z-index to keep the layout whilst not conflicting with dropdowns or a sticky header.
-
Visit your site → Pages → Custom code → Custom CSS, and copy and paste the CSS provided below there. Don’t forget to save after each edit.
