Jump to content

Create line/spacer between header and main body

Recommended Posts

Hi everyone,

I'm trying to create a line to separate my header from the main body of my website on 7.1. Actually, i'm trying to figure out how to do this between sections in several places. The closest i can figure out is making a blank section and setting the height to small but that's still WAY more space than I want.  I really just want it to be a few pixel wide line. Anyone have any thoughts on how I could accomplish this?


Link to comment

Hi @mtbrutger,

You can add a little custom code to do this. Add this to Design > Custom CSS and play around with the color and size of the border. You'll also want to change out the data section id to match the one on your site to add a border to the bottom of the section.

.header-announcement-bar-wrapper {
  border-bottom: 2px #000 solid;
[data-section-id="6010bc752a4e6b321df743d7"] {
  border-bottom: 2px #000 solid;


christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.