Buy me a coffee

Free answer within 24 hours. Send your questions now ->

Squarespace Header Custom Code

In this post, I will share some custom code for Squarespace Header, include

  • Remove Header
  • Sticky Header
  • Header Background Color
  • Header Background Image

Notes

  • If you want to apply for specific page, wrap code in <style>paste code here</style> and insert to Page Header Injection
  • If the code doesn’t work, send me a message via contact form, I’ll check & give the code

Avenue

/* Sticky Header Tablet - Desktop */
@media screen and (min-width:641px) {
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 40px 100px;
    z-index: 10;
}
}
/* Sticky Header Mobile */
@media screen and (max-width:640px) {
div#mobileMenuLink {
    position: fixed;
    top: 0;
    left: 45%;
    z-index: 10;
}
div#mobileNav {
    margin-top: 20px;
    position: fixed;
    z-index: 10;
    left: 45%;
}
header#header {
    position: fixed;
    left: 45%;
    margin-top: 30px;
    z-index: 10;
}
section#page {
    margin-top: 30px;
}
}
/* Header Background Color */
#canvas {
    max-width: 100% !important;
}
#header {
    margin: -85px -75px;
    padding: 10px 75px !important;
    background: gray;
}
/* Remove Header */
header#header {
    display: none;
}
div#mobileMenuLink {
    display: none;
}

Aviator

/* Sticky Header */
header#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
/* Remove Header */
header#header {
    display: none;
}
/* Header Background Color */
header#header {
    background: #f1f2f3;
}
/* Header Background Image */
header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

Bedford Family

Include: Anya, Bedford, Bryant, Hayden, Bedford

/* Sticky Header */
header#header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
}
/* Remove Header */
header#header {
    display: none;
}
/* Header Background Color */
header#header {
    background: #f1f2f3 !important;
}
/* Header Background Image */
header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Brine Family

Include: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine.

/* Sticky Header */
.Header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}
/* fix overlap content */
.Site-inner {
    padding-top: 100px;
}
/* Hide Header */
.Header {
    display: none !important;
}
/* Header background color */
.Header {
    background: #ff0000;
}

Farro:

Include: Farro, Haute

/* Header background color */
header.Header {
    background: #f1f2f3;
}
.Mobile-bar {
    background: #f1f2f3;
}
/* Header background image */
header.Header, .Mobile-bar {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Remove header */
.Mobile-bar {
    display: none;
}
header.Header {
    display: none !important;
}
/* Sticky Header */
header.Header {
    position: fixed !important;
    top: 0;
    z-index: 999 !important;
}

Five

/* Header background color */
nav#mobile-navigation {
    background: #f1f2f3;
}
div#navigation-top {
    background: #f1f2f3;
}
/* Header background image */
nav#mobile-navigation, div#navigation-top {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Remove Header */
div#navigation-top {
    display: none;
}
nav#mobile-navigation {
    display: none !important;
}
/* Sticky Header */
div#navigation-top, nav#mobile-navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

Flatiron

/* Header background color */
header#topBar {
    background: #ff0000 !important;
}
/* Header background image */
header#topBar {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Remove Header */
header#topBar {
    display: none;
}
section#container {
    margin-top: 0 !important;
}

Forte

/* Header background color */
div#headerWrapper {
    background: #000;
}
/* Header background image */
div#headerWrapper  {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* remove header */
div#headerWrapper {
    display: none;
}

Ishimoto

/* header background color */
div#headerWrapper {
    background: #ff0000;
}
/* Header background image */
div#headerWrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/wexley-squarespace.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
}
/* remove header */
header#header {
    display: none;
}
/* sticky header */
/* Fixed Header - Desktop */
header#header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
div#pageWrapper {
    margin-top: 100px;
}
/* Fixed Header - Mobile */
div#mobileMenuLink {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}

Momentum

/* header background color */
header#header {
    background-color: #f7f8f9;
}
/* header background image */
header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
/* remove header */
header#header {
    display: none;
}

Montauk

Include: Julia, Kent, Montauk, OM

/* fullwidth header */
@media screen and (min-width:641px) {
div#canvas {
    position: relative;
}
header#header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 5vw;
}
section#page {
    margin-top: 15vw;
}
}
/* header background color */
header#header {
    background: #000;
}
/* header background image */
header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* remove header */
header#header {
    display: none;
}

Native

/* Fullwidth header */
@media screen and (min-width:641px) {
header#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
div#pageWrapper {
    margin-top: 120px;
}
}
/* Header background */
header#header {
    background: #f1f2f3;
}
/* remove header */
header#header {
    display: none;
}

Pacific Family

Include:  Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific

/* header background */
header#header {
    background: #f1f2f3;
}
header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* remove header */
header#header {
    display: none;
}
/* Sticky header */
header#header {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 999;
}
/* Header background on scroll */
.show-on-scroll {
    background: #f1f2f3;
}

Skye Family

Include: Foundry, Indigo, Ready, Skye, Tudor

/* Header background */
div#headerAnnouncementWrapper {
    background: #f1f2f3;
}
header#header {
    padding-bottom: 3%;
    padding-top: 3%;
}
/* remove header */
div#headerAnnouncementWrapper {
    display: none;
}
/* Sticky header */
@media screen and (max-width:640px) {
div#headerAnnouncementWrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
main#page {
    margin-top: 100px;
}
}

Tremont

Include: Camino, Carson, Henson, Tremont

/* header background */
header#siteHeader {
    background: #f1f2f3;
}
header#siteHeader {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
/* remove header */
header#siteHeader {display: none;}

Wells

Nothing

Wexley

/* Header background */
div#headerWrapper {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
    background: green;
}
div#pageWrapper {
    margin-top: 115px;
}
/* remove header */
/* Desktop - Tablet */
header#header {
    display: none;
}
/* Mobile */
div#mobileMenuLink {
    display: none;
}

York Family

Include: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York

/* Header  background */
header#header {
    background: #ff0000;
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}
header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}
/* remove header */
header#header {
    display: none;
}
/* sticky header */
header#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

Squarespace 7.1

Include: Novo, Pazari, Nolan, Utica, Cami, Matsuya, Nevins, Kester, Gates, Zion, Classon, Hawley, Suhama, Elliott, Otto, Tepito, Balboa, Beaumont, Quincy, Talva, Minetta, Falodu, Hester, Crosby, Ventura, Maru, Tresoire, Almar, Alameda, Patil, Stanton, Paloma, Fillmore, Palmera, Souto, Brower, Merida, Grove, Harman, Rivoli, Noll, Bergen, Degraw, Corrigan, Sackett, Lakshi, Pulaski, Suhama, Cailles, Colima, Barbosa, Clune, Irving, Suffolk, Clarkson, Lusaka, Bailard, Malone, Roseti, Euclid, Carmine, Wycoff, Harbor, Ocotillo, Fayette, Roseti, Dario, Soria, Morena, Rey, Lenoix, Bleecker, Vandam, Cruz, Kitui, Waverly, Vance, Orina, Chotto, Auburn, Juniper, Palmer, Atlantic, Iduma, Pine, Eldridge, Pulsaki, Amal, Suhama, Hart, Carroll, Noll, Hidano, Palermo, Cailles, Archer, Kearny, Sellwood, Essex, Mason, Gramercy Studio, Cole, Devoe, Randi, Zorayda, Manor Studios, Grant, Toledo, Hoyd, Troutman, Tantillo, Maqueda, Hemlock, Bogart, Florence

/* header background */
header#header {
    background: red;
}
header#header {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* remove header */
header#header {
    display: none;
}
/* sticky header */
header#header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

Share this post:

4 thoughts on “Squarespace Header Custom Code”

  1. Hi Tuan,

    Your CSS has been very helpful to me. Thank you.

    Was hoping I could get some help with the Wexley sticky header CSS you posted:

    /* Header background */
    div#headerWrapper {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
    background: green;
    }

    When I use this, it compromises on the main body of the webpage by shifting all the contents of the main body upwards and no matter if I add more padding in the CSS code or in Site Styles, the code above still chews into the body and I lose the very top of some of my main body content. I don’t want to set padding for top and bottom to 0px. I want still want to maintain some padding.

    Thanks, Tuan.

    Reply

  2. Hi, I have a Wexley template on Squarespace. I tried some of the code in the CSS section that you provided up here, but none of it is working to make my header sticky.

    Could you point me in the right direction?

    Thanks!

    Reply

Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder