Custom Line of Text Above the Navigation in Squarespace

Jul 8

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 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 (FAQ)

1. Can I add a line of text above the navigation in Squarespace without using code injection?

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!)

2. Will the text line run on desktop and mobile?

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.

3. Would I be able to input a clickable link in the announcement text with this method?

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.

4. Will that change my site’s design or layout?

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.

5. Which part of the CSS code should I paste to add this custom text?

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.

6. How do I edit the text or background color of the announcement?

Modify the content, background-color, and color properties in the CSS. For example, change the content: "Free shipping..." to your message, and adjust colors to match.