Custom CSS for Carson Template Squarespace

Carson: An immersive website template that lets your visuals speak first with a slideshow portfolio and customizable full-bleed galleries.

Notes

1. Adding Custom CSS to Home > Design > Custom CSS

2. Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;

3. If it still doesn’t work, send me a message via Contact Form  with your site url. I’ll give you exact CSS..

4. How to find Page ID: https://beaverhero.com/squarespace-how-to/

body#collection-56d86c682b8dde72910d59bd is Page ID. Each page will have different ID

Header

Hide Site Title

Entire Site

span.site-title {
    display: none;
}

One Page

body#collection-57362cfa2fe131630fbe7906 span.site-title {
    display: none;
}

Hide Hamburger Icon

Entire Site

a#navToggle {
    display: none;
}

One Page

a#navToggle {
    display: none;
}

Disable Site Title Link

.site-title a {
    pointer-events: none;
}

Site Title Color

Entire Site

span.site-title {
    color: #ff0000;
}

One Page

body#collection-57362cfa2fe131630fbe7906 span.site-title {
    color: #ff0000;
}

Increase Padding between Navigation Items

#mainNavigation .nav-item {
    padding-left: 55px;
}

Remove Header

Entire Site

header#siteHeader {
    display: none;
}

One Page

body#collection-57362cfa2fe131630fbe7906 header#siteHeader {
    display: none;
}

Align Right Site Title

.site-branding h1 {
    text-align: right !important;
}

Header Fullwidth

header#siteHeader {
    margin: 0;
    padding-left: 3vw;
    padding-right: 3vw;
}

Header Background Color

Entire Site

header#siteHeader {
    background: #ff0000;
    margin: 0;
    padding-left: 3vw;
    padding-right: 3vw;
}

One Page

body#collection-573e1fbf1bbee0d9236489a2 header#siteHeader {
    background: #ff0000;
    margin: 0;
    padding-left: 3vw;
    padding-right: 3vw;
}

All pages exclude Homepage

body:not(.homepage) header#siteHeader {
    background: green !important;
    margin: 0; 
    padding-left: 3vw; 
    padding-right: 3vw;
}

Featured Image: Squarespace.com

Share this post:

Start learning HTML/CSS basic to style your Squarespace Site.

Leave a Comment