Mentor Template: Drive action with bold headers and impactful banners.
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 */ .Header-branding { color: #000 !important; } /* Mobile */ a.Mobile-bar-branding { color: #000 !important; }
One Page
/* Desktop */ body#collection-57d6c77c2994cab476ea1c26 .Header-branding { color: #000 !important; } /* Mobile */ body#collection-57d6c77c2994cab476ea1c26 a.Mobile-bar-branding { color: #000 !important; }
Disable Site Title Link
Entire Site
.Header-branding { pointer-events: none; }
One Page
body#collection-57d6c77c2994cab476ea1c26 .Header-branding { pointer-events: none; }
Remove Site Title
Entire Site
.Header-branding { display: none; } a.Mobile-bar-branding { display: none; }
One Page
body#collection-57d6c77c2994cab476ea1c26 .Header-branding { display: none; } body#collection-57d6c77c2994cab476ea1c26 a.Mobile-bar-branding { display: none; }
Remove Header Navigation
Entire Site
.Header-nav { display: none; }
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 .Header-nav { display: none; }
Site Title (Right) – Navigation (Left)
.Header-inner { flex-direction: row-reverse; }
Site Title (Top) – Navigation (Bottom)
Entire Site
.Header-inner { flex-direction: column; }
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 .Header-inner { flex-direction: column; }
Header Background Color
Entire Site
/* Mobile */ .Mobile-bar.Mobile-bar--top { background: #000; } /* Desktop */ header.Header.Header--bottom { background: #000; }
One Page
/* Mobile */ body#collection-5798fd31e4fcb5ab0c665dc7 .Mobile-bar.Mobile-bar--top { background: #000; } /* Desktop */ body#collection-5798fd31e4fcb5ab0c665dc7 header.Header.Header--bottom { background: #000; }
Fixed Header
Entire Site
@media screen and (min-width:640px) { /* Desktop */ header.Header.Header--bottom { position: fixed; top: 0; left: 0; right: 0; z-index: 999; padding-bottom: 30px; } /* Remove Overlap Content */ .Content-outer { margin-top: 90px; } } /* Mobile */ .Mobile-bar.Mobile-bar--top { position: fixed; top: 0; z-index: 999; left: 0; right: 0; }
One Page
@media screen and (min-width:640px) { /* Desktop */ body#collection-5798fd31e4fcb5ab0c665dc7 header.Header.Header--bottom { position: fixed; top: 0; left: 0; right: 0; z-index: 999; padding-bottom: 30px; } /* Remove Overlap Content */ body#collection-5798fd31e4fcb5ab0c665dc7 .Content-outer { margin-top: 90px; } } /* Mobile */ body#collection-5798fd31e4fcb5ab0c665dc7 .Mobile-bar.Mobile-bar--top { position: fixed; top: 0; z-index: 999; left: 0; right: 0; }
Remove Header
Entire Site
[data-nc-base="mobile-bar"] { display: none !important; } .Header.Header--bottom { display: none !important; }
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 [data-nc-base="mobile-bar"] { display: none !important; } body#collection-5798fd31e4fcb5ab0c665dc7 .Header.Header--bottom { display: none !important; }
Navigation Overlay Color
.Mobile-overlay-menu { background: #f1f2f3; }
Navigation Overlay Width
.Mobile-overlay { width: 50%; }
Force Mobile Header on Desktop
Entire Site
@media screen and (min-width:640px) { [data-nc-base="mobile-bar"] { display: flex; } .Header.Header--bottom { display: none !important; } }
One Page
@media screen and (min-width:640px) { body#collection-5798fd31e4fcb5ab0c665dc7 [data-nc-base="mobile-bar"] { display: flex; } body#collection-5798fd31e4fcb5ab0c665dc7 .Header.Header--bottom { display: none !important; } }
Replace Hamburger Icon with Image
Entire Site
button.Mobile-bar-menu { visibility: hidden; } button.Mobile-bar-menu:after { visibility: visible; content: ""; display: block; background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-repeat: no-repeat; width: 30px; height: 30px; margin-top: -25px; background-size: contain; background-position: center center; }
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 button.Mobile-bar-menu { visibility: hidden; } body#collection-5798fd31e4fcb5ab0c665dc7 button.Mobile-bar-menu:after { visibility: visible; content: ""; display: block; background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-repeat: no-repeat; width: 30px; height: 30px; margin-top: -25px; background-size: contain; background-position: center center; }
Site Title (Right) – Hamburger Icon (Left)
.Mobile-bar.Mobile-bar--top { flex-direction: row-reverse; }
Add word “Menu” beside Hamburger Icon
Entire Site
button.Mobile-bar-menu:after { content: "Menu"; color: #fff; position: absolute; right: 50px; top: 30px; }
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 button.Mobile-bar-menu:after { content: "Menu"; color: #fff; position: absolute; right: 50px; top: 30px; }
Footer
Footer Background Color
Entire Site
footer.Footer { background: #f2f5f7; }
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 footer.Footer { background: #f2f5f7; }
Footer Background Image
Entire Site
footer.Footer { 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; background-attachment: fixed; }
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 footer.Footer { 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; background-attachment: fixed; }
Subscribe Button Style
.newsletter-form-button { background: #000 !important; color: #fff !important; border-radius: 20px !important; }
Remove Footer
Entire Site
footer.Footer { display: none !important; }
One Page
body#collection-5798fd31e4fcb5ab0c665dc7 footer.Footer { display: none !important; }
Blog Page – Blog Posts
Remove Post Date
time.Blog-meta-item.Blog-meta-item--date { display: none; }
Remove Post Excerpt
.BlogList-item-excerpt { display: none !important; }
Remove Post Author
.Blog-meta-item--author { display: none !important; }
Remove Read More
.BlogList-item-readmore { display: none !important; }
Turn Read More to Button
.BlogList-item-readmore span { display: block; background: #000; color: #fff; padding: 5px 10px; border-radius: 5px; max-width: 100px; text-align: center; }
Remove –> symbol in Read More
.BlogList-item-readmore span:after { display: none; }
Remove Post Social Share
All Blog Posts
.BlogItem-share { display: none; }
Specific Blog Post
body#item-581bb4135016e1a8a7aded1c .BlogItem-share { display: none; }
Other
Page Background Color
Entire Site
.Main.Main--page { background: #f1f2f3; }
One Page
body#collection-57b22f9044024312ebcd79b5 .Main.Main--page { background: #f1f2f3; }
Page Background Image
Entire Site
.Main.Main--page { 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-57b22f9044024312ebcd79b5 .Main.Main--page { 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; }
Featured Image: Squarespace.com