Miller Template: Full-bleed images and slideshow galleries shine the spotlight on your many talents.
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
/* Desktop */ a.Header-branding { color: #ff0000 !important; } /* Mobile */ a.Mobile-bar-branding { color: #ff0000 !important; }
One Page
/* Desktop */ body#collection-5893546059cc6801da2be63f a.Header-branding { color: #ff0000 !important; } /* Mobile */ body#collection-5893546059cc6801da2be63f a.Mobile-bar-branding { color: #ff0000 !important; }
Site Title (Top) – Navigation (Bottom)
Entire Site
.Header-inner { flex-direction: column; }
One Page
body#collection-5893546059cc6801da2be63f .Header-inner { flex-direction: column; }
Site Title (Right) – Navigation (Left)
Entire Site
/* Desktop */ .Header-inner { flex-direction: row-reverse; } /* Mobile */ .Mobile-bar.Mobile-bar--top { flex-direction: row-reverse; }
One Page
/* Desktop */ body#collection-5893546059cc6801da2be63f .Header-inner { flex-direction: row-reverse; } /* Mobile */ body#collection-5893546059cc6801da2be63f .Mobile-bar.Mobile-bar--top { flex-direction: row-reverse; }
Remove Site Title
Entire Site
/* Desktop */ .Header-branding { display: none; } /* Mobile */ a.Mobile-bar-branding { display: none; }
One Page
/* Desktop */ body#collection-5893546059cc6801da2be63f .Header-branding { display: none; } /* Mobile */ body#collection-5893546059cc6801da2be63f a.Mobile-bar-branding { display: none; }
Remove Tagline
Entire Site
.Header-tagline { display: none; }
One Page
body#collection-5893546059cc6801da2be63f .Header-tagline { display: none; }
Show Tagline on Mobile
a.Mobile-bar-branding:after { content: "Tagline"; display: block; margin-top: 10px; font-size: 15px; color: #ff0000; }
Tagline Color
.Header-tagline { color: #ff0000 !important; }
Navigation vertically stack
.Header-nav-inner { display: flex; flex-direction: column; } .Header-inner { padding-right: 5px; }
Hide Item in Navigation
First Item
.Header-nav--primary .Header-nav-item:nth-child(1) { display: none; }
Second Item
.Header-nav--primary .Header-nav-item:nth-child(2) { display: none; }
Do similar!
Replace Hamburger Icon with word “Menu”
Entire Site
button.Mobile-bar-menu { visibility: hidden; } button.Mobile-bar-menu:after { visibility: visible; content: "Menu"; color: #ff0000; font-size: 20px; }
One Page
body#collection-5893546059cc6801da2be63f button.Mobile-bar-menu { visibility: hidden; } body#collection-5893546059cc6801da2be63f button.Mobile-bar-menu:after { visibility: visible; content: "Menu"; color: #ff0000; font-size: 20px; }
Navigation Overlay Background Color
Entire Site
.Mobile-overlay-menu { background: #ff0000; } .Mobile-overlay { background: #ff0000 !important; } button.Mobile-overlay-close { background: #ff0000 !important; }
One Page
body#collection-5893546059cc6801da2be63f .Mobile-overlay-menu { background: #ff0000; } body#collection-5893546059cc6801da2be63f .Mobile-overlay { background: #ff0000 !important; } body#collection-5893546059cc6801da2be63f button.Mobile-overlay-close { background: #ff0000 !important; }
Navigation Overlay Width
.Mobile-overlay { width: 60%; }
Header Background Color
Entire Site
/* Mobile */ .Mobile-bar.Mobile-bar--top { background: #000; } /* Desktop */ .Header.Header--bottom { background: #000; }
One Page
/* Mobile */ body#collection-5893546059cc6801da2be63f .Mobile-bar.Mobile-bar--top { background: #000; } /* Desktop */ body#collection-5893546059cc6801da2be63f .Header.Header--bottom { background: #000; }
Fixed Header
Entire Site
/* Desktop */ .Header.Header--bottom { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; } /* Mobile */ .Mobile-bar.Mobile-bar--top { position: fixed; left: 0; right: 0; top: 0; z-index: 999; }
One Page
/* Desktop */ body#collection-5893546059cc6801da2be63f .Header.Header--bottom { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; } /* Mobile */ body#collection-5893546059cc6801da2be63f .Mobile-bar.Mobile-bar--top { position: fixed; left: 0; right: 0; top: 0; z-index: 999; }
Remove Header
Entire Site
/* Mobile */ .Mobile-bar.Mobile-bar--top { display: none; } /* Desktop */ .Header.Header--bottom { display: none !important; }
One Page
/* Mobile */ body#collection-5893546059cc6801da2be63f .Mobile-bar.Mobile-bar--top { display: none; } /* Desktop */ body#collection-5893546059cc6801da2be63f .Header.Header--bottom { display: none !important; }
Footer
Footer Background Color
Entire Site
footer.Footer { background: #f1f2f3; }
One Page
body#collection-5893546059cc6801da2be63f footer.Footer { background: #f1f2f3; }
Footer Background Image
Entire Site
footer.Footer { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/brine-demo-squarespace-com-1689x1080-500w.jpg); background-size: cover; background-position: center top; background-repeat: no-repeat; }
One Page
body#collection-5893546059cc6801da2be63f footer.Footer { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/brine-demo-squarespace-com-1689x1080-500w.jpg); background-size: cover; background-position: center top; background-repeat: no-repeat; }
Remove Footer
Entire Site
footer.Footer { display: none !important; }
One Page
body#collection-5893546059cc6801da2be63f footer.Footer { display: none !important; }
Blog Page – Blog Posts
Remove Post Featured Image
.BlogList-item-image { display: none !important; }
Remove Post Date
.Blog-meta-item--date { display: none !important; }
Remove Post Date in Post Pagination
time.BlogItem-pagination-link-meta-item.BlogItem-pagination-link-meta-item--date { display: none; }
Align Center Post Title/Post Date (Blog Page)
.view-list .BlogList-item * { text-align: center; } .Blog-meta.BlogList-item-meta { justify-content: center; }
Other
Page Background Color
Entire Site
.Main { background: #000; }
One Page
body#collection-58e6a3aeebbd1a572ac159b9 .Main { background: #000; }
Page Background Image
Entire Site
.Main { background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/liberte.png); background-repeat: no-repeat; background-size: cover; background-position: center center; }
One Page
body#collection-58e6a3aeebbd1a572ac159b9 .Main { background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/liberte.png); background-repeat: no-repeat; background-size: cover; background-position: center center; }
Remove White spacing between Content & Header
Entire Site
.Main-content { padding-top: 0; }
One Page
body#collection-58e6a3aeebbd1a572ac159b9 .Main-content { padding-top: 0; }
Feature Image: Squarespace.com