Native Template: A versatile and modern website template with prominent thumbnail images and location tags to highlight and organize your ideas.
In this post
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