Sofia Template: A long scrolling format and clear call to action encourages new clients to reach out.
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
Hide Site Title
Entire Site
.Header-branding { display: none; } a.Mobile-bar-branding { display: none; }
One Page
body#collection-58d01506e3df284bada16b9f .Header-branding { display: none; } body#collection-58d01506e3df284bada16b9f a.Mobile-bar-branding { display: none; }
Disable Site Title Link
Entire Site
.Header-branding { pointer-events: none; } a.Mobile-bar-branding { pointer-events: none; }
One Page
body#collection-58d01506e3df284bada16b9f .Header-branding { pointer-events: none; } body#collection-58d01506e3df284bada16b9f a.Mobile-bar-branding { pointer-events: none; }
Hide Header
Entire Site
.Mobile-bar { display: none; } .Header { display: none !important; }
One Page
body#collection-58d01506e3df284bada16b9f .Mobile-bar { display: none; } body#collection-58d01506e3df284bada16b9f .Header { display: none !important; }
Header Background Color
Entire Site
/* Desktop */ .Header { background: #ff0000; padding-bottom: 30px; } /* Mobile */ .Mobile-bar { background: #ff0000; }
One Page
/* Desktop */ body#collection-58d01506e3df284bada16b9f .Header { background: #ff0000; padding-bottom: 30px; } /* Mobile */ body#collection-58d01506e3df284bada16b9f .Mobile-bar { background: #ff0000; }
Fixed Header
Entire Site
.Header-branding { position: fixed; top: 0; left: 0; right: 0; padding-top: 20px !important; padding-bottom: 20px !important; }
One Page
body#collection-58d01506e3df284bada16b9f .Header-branding { position: fixed; top: 0; left: 0; right: 0; padding-top: 20px !important; padding-bottom: 20px !important; }
Site Title Color
Entire Site
.Header-branding { color: #ff0000 !important; }
One Page
body#collection-58d01506e3df284bada16b9f .Header-branding { color: #ff0000 !important; }
Fixed Site Title
Entire Site
a.Header-branding { position: fixed; left: 0; right: 0; z-index: 999; } a.Mobile-bar-branding { position: fixed; left: 0; right: 0; top: 0; z-index: 999; }
One Page
body#collection-58d01506e3df284bada16b9f a.Header-branding { position: fixed; left: 0; right: 0; z-index: 999; } body#collection-58d01506e3df284bada16b9f a.Mobile-bar-branding { position: fixed; left: 0; right: 0; top: 0; z-index: 999; }
Remove Header
Entire Site
header.Header { display: none !important; } .Mobile.loaded { display: none; }
One Page
body#collection-58d01506e3df284bada16b9f header.Header { display: none !important; } body#collection-58d01506e3df284bada16b9f .Mobile.loaded { display: none; }
Footer
Remove Footer
Entire Site
footer.Footer { display: none !important; }
One Page
body#collection-58d01506e3df284bada16b9f footer.Footer { display: none !important; }
Footer Background Color
Entire Site
.Footer { background: #ff0000; }
One Page
body#collection-58d01506e3df284bada16b9f .Footer { background: #ff0000; }
Footer Background Image
Replace https://static1… with your image URL
Entire Site
.Footer { background-image: url(https://static1.squarespace.com/static/58d00f1…/t/5908c16…/1493746036753/bio-extended.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; }
One Page
body#collection-58d01506e3df284bada16b9f .Footer { background-image: url(https://static1.squarespace.com/static/58d00f1…/t/5908c16…/1493746036753/bio-extended.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; }
Featured Image: Squarespace.com