Custom CSS for Native Template Squarespace

Native Template: A versatile and modern website template with prominent thumbnail images and location tags to highlight and organize your ideas.

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

Site Title Color

Entire Site

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

One Page

body#collection-527d3781e4b05acc5f1bb99c span.placed-site-title {
    color: #ff0000;
}

Disable Site Title Link

Entire Site

h1.logo.site-title {
    pointer-events: none;
}

One Page

body#collection-527d3781e4b05acc5f1bb99c h1.logo.site-title {
    pointer-events: none;
}

Remove Site Title Hover Opacity

#header .logo a:hover {
    color: initial;
}

Align Site Title to Left/Right

.logo.site-title {
    text-align: left !important;
}

Site Title (Left) – Navigation (Right)

div#headerInfo {
    display: flex;
    justify-content: space-between;
}
nav.main-nav {
    text-align: right !important;
}
div#navBlock {
    flex-grow: 1;
}

Site Title (Right) – Navigation (Left)

div#headerInfo {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
div#navBlock {
    flex-grow: 1;
}
nav.main-nav {
    text-align: left !important;
}

Site Title/Logo (Bottom) – Navigation (Top)

div#headerInfo {
    display: flex;
    flex-direction: column-reverse;
}

Align Navigation

nav.main-nav {
    text-align: left !important;
}

Decrease Space between Site Title & Navigation

.logo.site-title {
    margin-bottom: 0 !important;
}
nav.main-nav {
    padding-top: 5px !important;
}

Border Top/Bottom Navigation

div#navBlock {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

Navigation Hover Color

.main-nav a:hover {
    color: #ff0000 !important;
}

Strike Navigation Hover Link

.main-nav a:hover {
    text-decoration: line-through;
}

Remove Site Title

Entire Site

span.placed-site-title {
    display: none !important;
}

One Page

body#collection-527d37a1e4b080fe1829dc66 span.placed-site-title {
    display: none !important;
}

Header Background Color

Entire Site

header#header {
    background: #f1f2f3;
}

One Page

body#collection-527d37a1e4b080fe1829dc66 header#header {
    background: #f1f2f3;
}

Remove Header

Entire Site

header#header {
    display: none;
}

One Page

body#collection-527d37a1e4b080fe1829dc66 header#header {
    display: none;
}

Full-width 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;
}
}

Change Navigation to Button (Mobile)

@media screen and (max-width:640px) {
div#navBlock {
    background: #000;
    border-radius: 50px;
}
select#mobileSelect {
    color: #ff0000;
}
}

Blog

Remove Post Date

.date {
    display: none;
}

Remove Comment (Blog List Page)

.comments {
    display: none !important;
}

Remove Post Categories (Blog List Page)

.view-list .categories {
    display: none !important;
}

Remove “Newer/Older”

nav.item.pagination {
    display: none;
}

Comment Button Style

.comment-btn {
    background: #ff0000 !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    color: #000 !important;
}

Remove space above “Newer/Older”

.view-item.collection-type-blog article {
    padding-bottom: 0;
}

Change “Heart icon” Color

span.like-count:before {
    color: red !important;
}

Remove Like Icon

.sqs-simple-like {
    display: none !important;
}

Featured Image: Squarespace.com

Share this post:

If you have any questions, just fill in form below

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Posted in