CSS: Transparent header in Squarespace

Add a heading (2).png
 

Some of my websites look absolutely incredible with a transparent header and other's don't.

If you're wanting a transparent header for your 7.0 or 7.1 Squarespace website, use the below code.

Inject it into your DESIGN > CUSTOM CSS section.

//ADDING TRANSPARENT HEADER//

header.Header.Header--top {
    position: absolute;
    z-index: 999;
    top: 0;
    width: 100%;
    background: transparent;
}

Fun trick - always name your code with some lovely forward-back slashes. Otherwise you will have the biggest headache trying to figure out what's what!

For all references and tips, please check out the Squarespace Forum here.

SquarespaceKiandra Trickettsquarespace, squarespace design, webdevelopment, cssComment