CSS: Overlapping site logo in Squarespace

Want to have your logo overlap onto your header image banner? Well this straight for CSS snippet will be perfect for you.

I love this feature on a centre aligned logo, where it creeps on over the top.

This code is suitable for a 7.0 template, and may work in 7.1 layouts.

Add this code to your DESIGN > CUSTOM CSS section.

// ADDING OVERLAP LOGO //

.Header-branding-logo {
  margin-bottom: -120px;
  position: relative;
  z-index: 5000;
}

You can change the margin to how much you would like the logo to overlap.

If you're interested in learning how to do a transparent header, read tomorrow's blog!