CSS Hack #1: Shrink the logo on scroll (without crying into your coffee)

16 Apr

Let’s face it: Squarespace headers can be a bit... extra. You spend hours perfecting your homepage only to have your oversized logo and chunky nav bar hog the spotlight like a stage mum in sequins.

Enter: the scroll-triggered logo shrink hack.

This quick CSS snippet is perfect for business website owners, DIYers, and designers who want a slick, modern feel — and who wouldn’t mind reclaiming a little vertical space without breaking anything (or crying). Best part? It’s easier than it sounds, and I’ll walk you through it step-by-step.

Why Shrink the Logo on Scroll?

It’s all about UX. When your header is fixed (aka it stays at the top of the screen as users scroll), a full-height logo and nav bar can eat up precious real estate. This trick subtly reduces the logo size once the user starts scrolling, so your content can shine.

Think of it as a tidy little animation that says, "Hey, I’m still here... but I’ll give you some space."

The CSS Snippet

Here’s the code in all its glory:

@media only screen and (min-width: 750px) {
  #header .header-title-logo img {
    transition: max-height 140ms ease-in-out;
  }

  #header.shrink {
    .header-announcement-bar-wrapper {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
    }
    .header-title-logo img {
      max-height: 75px;
    }
  }
}

What this does:

Applies only to screens 750px and wider
Smoothly transitions the logo image size
Targets headers with the .shrink class that listens for scroll events

Step-by-Step Guide

1. Make sure your header is fixed This hack only works if your site’s header is fixed. If it scrolls away with the page, well... there’s nothing to shrink!

Go to your Squarespace editor > Design > Site Styles > Header Layout, and confirm the fixed position is turned on.

2. Paste the CSS Head to Design > Custom CSS and paste in the snippet above.

3. Apply the .shrink class on scroll You can use a plugin or Squarespace extension that allows for scroll-based class toggling. If you’re comfortable with a bit of JavaScript, you can also manually apply the class via developer mode or code block integrations.

4. Save and refresh Scroll up and down like a maniac to watch your logo gently shrink. Magic.

Want More CSS Like This?

If you love this kind of slick, subtle enhancement, I’ve got a full CSS Code Library with 200+ custom snippets ready to copy, paste, and make your Squarespace site behave like it knows what it’s doing.

Think: hover effects, scroll animations, layout tweaks, and stylish fixes that turn "meh" into chef’s kiss.

Grab it here: https://ilovedigital.com.au/squarespace-css-library

Let’s Stay in Touch

I’m always sharing new tricks, tutorials, and (occasionally) memes for Shopify, Squarespace and WordPress users. Follow me @squarespaceguy on Insta, Tiktok or YouTube and level up your site one CSS hack at a time.

Got questions or stuck on a step? Drop a comment or DM — I’m here to help (and I promise not to reply in code only).

Jerrell Niu https://ilovedigital.com.au