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:

Leave a Comment