Headers

How do I reduce the header height in Squarespace?

The header height in Squarespace 7.1 is mainly controlled by vertical padding on the header inner wrapper and the logo size. Reducing both gives you a compact header.

Be careful not to set the height too small on mobile — tap targets need to stay at least 44px for accessibility. Test on both desktop and mobile after applying.

#header .header-inner {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Reduce logo size proportionally */
#header .header-title-logo img {
  max-height: 40px !important;
}

/* Compact the mobile header too */
@media screen and (max-width: 767px) {
  #header .header-inner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

Calculate perfect header spacing with our Spacing CalculatorTry it free →

Related Questions

How do I hide the header on a specific page in Squarespace?

How do I change the header background color in Squarespace?

How do I make the header transparent in Squarespace?

How do I hide the header on mobile in Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Talk to Long Drive Marketing →