Camino Template: Clever overlays and intriguing layouts bring your products and services to life.
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.site-title { color: #000; }
One Page
body#collection-587e99566a49633c1bdf0034 span.site-title { color: #000; }
Break Tagline under Logo
.site-branding { flex-direction: column; }
Underline for Site Tagline
Entire Site
h2.site-tagline { border-bottom: 1px solid #fff; }
One Page
body#collection-587e99566a49633c1bdf0034 h2.site-tagline { border-bottom: 1px solid #fff; }
Site Tagline Color
Entire Site
h2.site-tagline { color: #000 !important; }
One Page
body#collection-587e99566a49633c1bdf0034 h2.site-tagline { color: #000 !important; }
Remove Site Title
Entire Site
span.site-title { display: none; }
One Page
body#collection-587e99566a49633c1bdf0034 span.site-title { display: none; }
Remove Site Tagline
Entire Site
h2.site-tagline { display: none; }
One Page
body#collection-587e99566a49633c1bdf0034 h2.site-tagline { display: none; }
Disable Site Title Link
Entire Site
h1.site-title { pointer-events: none; }
One Page
body#collection-587e99566a49633c1bdf0034 h1.site-title { pointer-events: none; }
Show Tagline on Mobile
Entire Site
@media screen and (max-width:640px) { h2.site-tagline { visibility: visible !important; left: unset !important; position: relative !important; } .site-branding { flex-direction: column; } }
One Page
@media screen and (max-width:640px) { h2.site-tagline { visibility: visible !important; left: unset !important; position: relative !important; } .site-branding { flex-direction: column; } }
Navigation Hover Color
.nav-item.collection a:hover { color: #ff0000; }
Strike Navigation Hover Link
.nav-item.collection a:hover { text-decoration: line-through; }
Hide any item in Navigation
First item
.nav-item.collection:nth-child(1) { display: none; }
Second item
.nav-item.collection:nth-child(2) { display: none; }
Do Similar
Turn Navigation Last item to Button
Entire Site
.nav-item.collection:last-child a { background: #000; color: #fff; padding: 10px 20px; border-radius: 50px; }
One Page
body#collection-587e99566a49633c1bdf0034 .nav-item.collection:last-child a { background: #000; color: #fff; padding: 10px 20px; border-radius: 50px; }
Remove Navigation
Entire Site
nav#mainNavigation { display: none; }
One Page
body#collection-587e99566a49633c1bdf0034 nav#mainNavigation { display: none; }
Replace Hamburger Icon with word “Menu”
a#navToggle { visibility: hidden; width: 100px; } a#navToggle:before { visibility: visible; content: "Menu"; font-size: 15px; color: #000; }
Site Title (Right) – Navigation (Left)
Entire Site
/* Desktop */ @media screen and (min-width:640px) { header#siteHeader { flex-direction: row-reverse; } a#navToggle { display: block; visibility: hidden; flex-grow: 1; } } /* Mobile */ @media screen and (max-width:640px) { header#siteHeader { flex-direction: row-reverse; } }
Replace Hamburger icon with Custom Icon
Entire Site
a#navToggle:after { visibility: visible; content: ""; background-image: url(https://image.flaticon.com/icons/svg/149/149384.svg); width: 20px; height: 20px; background-size: contain; display: block; background-repeat: no-repeat; } a#navToggle { visibility: hidden; }
One Page
body#collection-587e99566a49633c1bdf0034 a#navToggle:after { visibility: visible; content: ""; background-image: url(https://image.flaticon.com/icons/svg/149/149384.svg); width: 20px; height: 20px; background-size: contain; display: block; background-repeat: no-repeat; } body#collection-587e99566a49633c1bdf0034 a#navToggle { visibility: hidden; }
Force Hamburger Icon on Desktop Header
Entire Site
@media screen and (min-width:641px) { a#navToggle { display: block; } .nav-social-wrapper { display: none; } }
One Page
@media screen and (min-width:641px) { body#collection-587e99566a49633c1bdf0034 a#navToggle { display: block; } body#collection-587e99566a49633c1bdf0034 .nav-social-wrapper { display: none; } }
Navigation Overlay Color (Mobile)
.overlay-nav-wrapper { background: #fff; }
Navigation Overlay Width (Mobile)
.overlay-nav-wrapper { max-width: 80vw; }
Decrease padding top on Navigation Item
.overlay-nav-wrapper { bottom: unset !important; max-height: 60vh; }
Align Items in Navigation Overlay
.overlay-nav-wrapper .nav-item.collection { text-align: left !important; padding-left: 10px; }
Fixed Header
Entire Site
.hide-header { opacity: 1 !important; top: 10px; background: #f1f2f3; padding-bottom: 0; margin: 0; padding-left: 50px; padding-right: 50px; }
One Page
body#collection-587928d22994ca1c5919bd81 .hide-header { opacity: 1 !important; top: 10px; background: #f1f2f3; padding-bottom: 0; margin: 0; padding-left: 50px; padding-right: 50px; }
Footer
Footer Background Color
Entire Site
footer.site-footer { background: #f1f2f3; }
One Page
body#collection-587928d22994ca1c5919bd81 footer.site-footer { background: #f1f2f3; }
Footer Background Image
Entire Site
footer.site-footer { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/hyde-demo-squarespace-com-1689x1080-500w.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; }
One Page
body#collection-587928d22994ca1c5919bd81 footer.site-footer { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/hyde-demo-squarespace-com-1689x1080-500w.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; }
Remove Footer
Entire Site
footer.site-footer { display: none !important; }
One Page
body#collection-587928d22994ca1c5919bd81 footer.site-footer { display: none !important; }
Other
Hide Page Title
Entire Site
h1.page-title { display: none !important; }
One Page
body#collection-5879238c03596ed44902f4ed h1.page-title { display: none !important; }
Page Background Color
Entire Site
.main-content-inner-wrapper { background: #f1f2f3; }
One Page
body#collection-5879238c03596ed44902f4ed .main-content-inner-wrapper { background: #f1f2f3; }
Page Background Image
Entire Site
.main-content-inner-wrapper { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; }
One Page
body#collection-5879238c03596ed44902f4ed .main-content-inner-wrapper { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; }
Remove Page Overlay
Entire Site
.overlay.blended-overlay.page-title-overlay.title-card-overlay { display: none; }
One Page
body#collection-5879238c03596ed44902f4ed .overlay.blended-overlay.page-title-overlay.title-card-overlay { display: none; }
Featured Image: Squarespace.com