Forte Template: With full-screen images and a slideshow landing page, this bold website template is sure to capture the attention of your visitors.
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
.logo-text a { color: #ff0000 !important; }
One Page
body#collection-56cb8c3837013b9fc42e8fff .logo-text a { color: #ff0000 !important; }
Disable Site Title Link
Entire Site
.logo-text a { color: #ff0000 !important; }
One Page
body#collection-56cb8c3837013b9fc42e8fff .logo-text a { color: #ff0000 !important; }
Hide Site Title
Entire Site
.logo-text { display: none; }
One Page
body#collection-56cb8c3837013b9fc42e8fff .logo-text { display: none; }
Hide Navigation
Entire Site
div#topNav { display: none; }
One Page
body#collection-56cb8c3837013b9fc42e8fff div#topNav { display: none; }
Change Navigation Drop-down Color
ul.folder-child { background: #ff0000 !important; }
Hide Header
Entire Site
div#headerWrapper { display: none; }
One Page
body#collection-56cb8c3837013b9fc42e8fff div#headerWrapper { display: none; }
Header Background Color
Entire Site
div#headerWrapper { background: #000; }
One Page
body#collection-56cb8c3837013b9fc42e8fff div#headerWrapper { background: #000; }
Overlay Background Color (Mobile)
nav#mobile-navigation { background: #000 !important; }
Change Hamburger Icon Color
a.icon-hamburger { color: #ff0000 !important; }
Add word “Menu” beside Hamburger Icon
span.ctrl-button.menu:before { content: "Menu"; color: #fff; font-size: 20px; position: absolute; right: 25px; top: 5px; }
Blog Page – Blog Posts
Remove Post Date
/* Blog Page */ .view-list .date { display: none; } /* Blog Posts */ .view-item span.date { display: none; }
Blog Posts Fullwidth
.view-item .pageWrapper { max-width: 100% !important; }
Increase Post Detail Width
.view-item .pageWrapper { max-width: 100% !important; }
Sticky Sidebar when scrolling
aside#sidebarWrapper { position: -webkit-sticky; position: sticky; top: 0; }