Add a Header Line in your Squarespace website

The Squarespace header plays a key role in your site’s navigation and overall visual balance. Sometimes, a small design detail—like adding a subtle line beneath your header—can make a big difference in defining space and improving aesthetics.

In this quick guide, you’ll learn how to add a clean, straight header line in Squarespace using a simple CSS snippet. You don’t need to know coding—just follow the steps below.

Why Add a Header Line in Squarespace?

Adding a header line helps:

• Visually separate your navigation menu from the main content

• Create a more defined and structured layout

• Add a minimal, professional touch to your Squarespace header design

• Maintain consistent spacing across different sections of your site

Whether you’re designing a modern business website or a creative portfolio, this subtle effect can enhance your site’s clarity and design precision.

Step 1: Open the Custom CSS Panel

To start, log in to your Squarespace dashboard.

Then go to:
Design → Custom CSS

This is where you can safely add your site-wide styling changes.

Step 2: Paste the CSS Code

#header {    
  box-shadow: 0px 0px 1px 0px rgba(170,170,170,1) !important;
}

This line adds a soft, subtle shadow effect—creating a clean divider beneath your header.

Step 3: Save and Test Your Changes

Click Save in the top-left corner.

Now, refresh your site and scroll through your pages. You’ll see a straight line under your header, giving your navigation area more definition and style.

If it doesn’t show immediately, try clearing your cache or refreshing your browser tab.

Step 4: Customize Your Header Line

You can easily adjust the look and feel of your header line. Here’s how:

• Change the color:
  Modify the rgba value in the code. For example:
  rgba(0, 0, 0, 0.2) for a soft black line or rgba(255, 255, 255, 0.3) for a light effect.

• Adjust thickness:
  Increase the shadow values slightly (for example, 0px 0px 2px) for a more visible line.

• Experiment with positioning:
  Combine it with other CSS tweaks like padding or margins to better fit your header layout.

Wrapping Up

Adding a simple header line in Squarespace is one of those small CSS enhancements that instantly improves your site’s design polish. With just a few lines of custom CSS, you can create a cleaner, more structured visual experience for your visitors—no coding expertise required.

Your Designer

I'm Ankush, a Squarespace web designer and founder of webgoyat. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at info@webgoyat.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.