CSS Menu Tools

I Tried Squarespace Custom CSS So You Don’t Have To (But You’ll Want To)

Written by

in

I build small brand sites for a living, and I tinker. I can’t help it. Squarespace works great out of the box, but I like to nudge things. Colors, spacing, little bits that make a page feel, well, yours. Custom CSS in Squarespace lets me do that without breaking stuff. Most days, anyway. Squarespace also has an official CSS Editor guide if you want the step-by-step basics straight from the source.

If you want to see an extended case study with even more before-and-after screenshots, I put my notes here: I Tried Squarespace Custom CSS So You Don’t Have To (But You’ll Want To).

Let me explain how I use it, what went right, what got weird, and the exact snippets I used on real sites.

Where I put the CSS (and why it’s not scary)

  • I go to Design, then Custom CSS. That panel gives you a live preview. I love that part. I can see mistakes fast.
  • For one-page changes, I use Page Settings, Advanced, then I paste CSS inside a style tag. That keeps the rest of the site clean.
  • If I need to target a single page with the site-wide panel, I use the page’s ID class (it looks like .collection-abc123). A free Chrome tool called “Squarespace ID Finder” helps me grab it.

For folks experimenting outside Squarespace, here’s how I add CSS in the Website.com builder (and what actually stuck)—the principles are the same.

You know what? The first time, I was nervous. But it feels kind of like stickers for your site. Peel, place, check, done. If you're starting completely from scratch, Paige Brunton’s beginner-friendly tutorial covers the fundamentals in plain English.
For quick, copy-paste menu styling that plays nicely with Squarespace, I sometimes start with the generator at CSS Menu Tools and then tweak from there.

Real tweaks I made (copy these)

Here are actual snippets from my own builds. They’re simple but they make a big difference.

1) Brand-y buttons that don’t scream

I wanted softer buttons. Rounded, calm teal, not too shouty.

/* Softer primary buttons */
.sqs-block-button .sqs-block-button-element {
  background: #0f766e;
  border-radius: 6px;
  padding: 14px 20px;
  text-transform: none;
  letter-spacing: 0.2px;
  color: #ffffff;
}

.sqs-block-button .sqs-block-button-element:hover {
  background: #115e59;
}

On one site, the logo felt too tall and wobbly. I shrank it so the header didn’t jump.

/* Keep header logo tidy */
.header .logo-image img,
.header-title-logo img {
  max-height: 28px;
}

3) Calm page title on the About page only

I like short page titles, then big story text. So I hid the page title on one page. Replace the ID with yours.

/* Hide page title on a single page */
.collection-5f8c1a2b3c4d5e6f7a8b9c0 .page-title {
  display: none;
}

If tweaking title styles interests you, I also put together a hands-on review with real code examples here: Title CSS Design: My Hands-On Review With Real Snippets.

4) Headings that match the brand voice

The brand felt classic. I used a serif for headings. Yes, Google Fonts works here.

/* Bring in a serif for headings */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap');

h1, h2, h3 {
  font-family: 'Libre Baskerville', Georgia, serif;
  letter-spacing: 0.3px;
}

5) Give mobile readers a break

On phones, giant H1 text can feel like shouting. I toned it down.

/* Softer headings on small screens */
@media (max-width: 640px) {
  h1 { font-size: 28px; line-height: 1.2; }
  h2 { font-size: 22px; line-height: 1.25; }
  .sqs-block-button .sqs-block-button-element { padding: 12px 16px; }
}

6) Quiet footer line (because the page already had a strong end)

Sometimes that top border in the footer fights the design.

/* Remove footer border line */
.Footer { border-top: none; }

Big opaque overlays can crush photos. I used a gentle film instead.

/* Light overlay on stacked galleries */
.sqs-gallery-design-stacked .slide .image-overlay {
  background: rgba(0, 0, 0, 0.15);
}

8) Seasonal touch without chaos

I made a gentle winter look with a tiny snow vibe. Subtle is key.

/* Winter vibe: cooler links and a faint page edge */
a { color: #2563eb; }
a:hover { color: #1d4ed8; }

body {
  box-shadow: 0 0 0 6px rgba(200, 220, 255, 0.15) inset;
}

The good, the weird, and the “why is this moving”

Here’s the thing. Some days it’s smooth. Other days, it’s a little “why does that jump.”

What I love:

  • It’s fast. You paste, you see.
  • You can target one page, one block, or the whole site.
  • No plugin mess. It lives in your theme.

What trips me up:

  • Squarespace classes can change between templates. A class name you used last year may not be there now.
  • Some built-in styles are strong. Your CSS may need a stronger selector, or a tiny !important.
  • Blocks sometimes add spacing that feels random. I end up setting margin and padding by hand.

Honestly, when a padding value “wins” over yours, it feels rude. But there’s a fix.

My little workflow (that keeps me sane)

  • I right-click and Inspect in my browser. I look for the real class in the HTML.
  • I write a slightly stronger selector, not a long messy one.
  • If needed, I use !important. But only when I must.
  • I add short comments in my CSS. Future me says thanks.
  • I keep a snippet stash in Notion. Buttons, headings, forms, all labeled.

Here’s an example of a stronger selector that beats a stubborn style without going wild:

/* Strong but clean selector for default buttons */
section .sqs-block-button .sqs-block-button-element {
  background: #0f766e !important; /* used only when needed */
}

One-page CSS trick I use a lot

When a landing page needs its own look, I add this in Page Settings > Advanced > Header:

<style>
/* Only affects this one page */
.page-title { display: none; }
.sqs-block-button .sqs-block-button-element { background: #1e40af; }
</style>

It keeps the main CSS panel clean, and the page feels like a mini campaign.

A quick note on forms and accessibility

I once changed placeholder text to a very light gray. It looked nice, but folks had trouble reading it. My fix:

/* Keep form placeholders readable */
::placeholder { color: #6b7280; } /* medium gray */

If you change colors, check contrast. I use the Stark plugin in Figma and the built-in color picker in macOS. Your eyes get tired late at night. Mine do.

Things that actually broke (and how I fixed them)

  • My header jumped on scroll. The logo got taller on sticky. I fixed it by locking the same max-height for sticky states too.
  • A product price got crushed on mobile. I raised the size and line-height in a mobile query.
  • A gallery caption hid behind an overlay. I bumped z-index.

Examples:

/* Sticky header logo stays the same size */
.header--scrolled .logo-image img { max-height: 28px; }

/* Product text reads well on phones */
@media (max-width: 640px) {
  .ProductItem h1 { font-size: 24px; line-height: 1.25; }
  .ProductItem .product-price { font-size: 20px; }
}

/* Bring captions forward */
.sqs-gallery-caption { z-index: 2; position: relative; }

Who should use Custom CSS on Squarespace?

  • If you’re picky about spacing and type, this is for you.
  • If you want big, wild layouts, a dev theme might

More posts