Kent Template: Commanding headlines and portfolio pages make your message stand 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
Site Title Color
Entire Site
.logo a { color: #ff0000 !important; }
One Page
body#collection-56b3a80ab09f956b607c1a7e .logo a { color: #ff0000 !important; }
Hide Site Title
Entire Site
h1.logo { display: none !important; }
One Page
body#collection-56b3a80ab09f956b607c1a7e h1.logo { display: none !important; }
Header Navigation Color
Entire Site
.main-nav li a { color: #ff0000 !important; }
One Page
body#collection-56b3a80ab09f956b607c1a7e .main-nav li a { color: #ff0000 !important; }
Hide Header Navigation
Entire Site
.main-nav { display: none; }
One Page
body#collection-56b3a80ab09f956b607c1a7e .main-nav { display: none; }
Hide Header
Entire Site
/* Desktop */ header#header { display: none; } /* Mobile */ div#mobileMenuLink { display: none; }
One Page
/* Desktop */ body#collection-56b3a80ab09f956b607c1a7e header#header { display: none; } /* Mobile */ body#collection-56b3a80ab09f956b607c1a7e div#mobileMenuLink { display: none; }
Header Background Color (Desktop)
Entire Site
header#header { background: #ff0000; }
One Page
body#collection-56b3a80ab09f956b607c1a7e header#header { background: #ff0000; }
Header Full-width
header#header { position: absolute; top: 0; left: 0; right: 0; padding: 0 12vw; margin-top: 2vw; }
Disable Site Title Link
h1.logo a { pointer-events: none; }
Drop-down Navigation Color (Desktop)
.subnav ul { background: #000 !important; }
Fixed Header (Desktop)
header#header { position: fixed; left: 0; right: 0; padding: 0 12vw; }
Menu Background Color (Mobile)
div#mobileMenuLink { background: #ff0000; position: absolute; left: 0; right: 0; top: 0; padding-top: 15px; }
Change word “Menu”
div#mobileMenuLink a { visibility: hidden; } div#mobileMenuLink a:before { visibility: visible; content: "New Menu"; color: #fff; font-size: 20px; margin-left: 30px; }
Site Title (Top) – Navigation (Bottom)
header#header { display: flex; flex-direction: column; }
Footer
Footer Background Color
Entire Site
footer#footer { background: #ff0000; }
One Page
body#collection-56b3a80ab09f956b607c1a7e footer#footer { background: #ff0000; }
Remove Footer
Entire Site
footer#footer { display: none; }
One Page
body#collection-56b3a80ab09f956b607c1a7e footer#footer { display: none; }
Blog Page – Blog Posts
Remove Post Date
.meta .date { display: none; }
Featured Image: Squarespace.com
Hi, Thank you for sharing. I need to fix a code in subnav.
I need to remove action button from subnav., frop drop menu.
I need only action button DONATE in Navigation.
Kent template.
https://www.ictfoodrescue.com/
drop menu
Partnerships
– Receiving agencies ( action button remove)
Get Involved
– Volunteer with Us ( action button remove)
I am using your code
.main-nav li:last-child a {
background: #17308c;
color: #fff !important;
padding: 6px 16px !important;
border-radius: 15px;}
Thank you.