Haute Template: A striking header and grid layout promote your brand and blog with a style as bold as you.
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: #ff0000 !important; } /* Mobile */ a.Mobile-bar-branding { color: #ff0000 !important; }
One Page
/* Desktop */ body#collection-569fff59a128e6d96313cd7b .Header-branding { color: #ff0000 !important; } /* Mobile */ body#collection-569fff59a128e6d96313cd7b a.Mobile-bar-branding { color: #ff0000 !important; }
Disable Site Title Link
Entire Site
/* Mobile */ a.Mobile-bar-branding { pointer-events: none; } /* Desktop */ .Header-branding { pointer-events: none; }
One Page
/* Mobile */ body#collection-569fff59a128e6d96313cd7b a.Mobile-bar-branding { pointer-events: none; } /* Desktop */ body#collection-569fff59a128e6d96313cd7b .Header-branding { pointer-events: none; }
Remove Site Title
Entire Site
/* Desktop */ .Header-branding { display: none; } /* Mobile */ a.Mobile-bar-branding { display: none; }
One Page
/* Desktop */ body#collection-569fff59a128e6d96313cd7b .Header-branding { display: none; } /* Mobile */ body#collection-569fff59a128e6d96313cd7b a.Mobile-bar-branding { display: none; }
Underline an active page in the navigation
.Header-nav-item--active { color: #ff0000 !important; }
Navigation Hover Color
.Header-nav-item:hover { color: #ff0000 !important; }
Remove Navigation
Entire Site
.Header-nav-inner { display: none; }
One Page
body#collection-569fff59a128e6d96313cd7b .Header-nav-inner { display: none; }
Navigation Overlay Color
.Mobile-overlay-menu { background: #f1f2f3; }
Navigation Overlay Width
.Mobile-overlay-menu { width: 70%; }
Replace Hamburger Icon with word “Menu”
.Mobile-bar-menu { visibility: hidden; } .Mobile-bar-menu:after { visibility: visible; content: "Menu"; font-size: 15px; color: #ff0000; }
Add word “Menu” below Hamburger Icon
.Mobile-bar-menu:after { visibility: visible; content: "Menu"; font-size: 15px; color: #ff0000; display: block; margin-top: 10px; }
Replace Hamburger Icon with Custom Icon/Image
.Mobile-bar-menu { visibility: hidden; } .Mobile-bar-menu:after { visibility: visible; content: ""; background-image: url(https://image.flaticon.com/icons/svg/1279/1279537.svg); background-repeat: no-repeat; background-size: contain; background-position: center center; display: block; width: 30px; height: 30px; }
Change Hamburger Icon Color
button.Mobile-bar-menu { stroke: #ff0000; }
Align Center Navigation Overlay Items
.Mobile-overlay-nav-item { text-align: center; }
Remove Search Icon on Mobile
a.Mobile-bar-search { display: none; }
Force Hamburger Icon on Desktop Header
[data-nc-base="mobile-bar"] { display: flex; } header.Header.loaded { display: none; }
Remove Hamburger Icon
button.Mobile-bar-menu { display: none; }
Header Background Color
Entire Site
/* Desktop */ .Header.loaded { background: #f1f2f3; } /* Mobile */ .Mobile-bar.Mobile-bar--top { background: #f1f2f3; }
One Page
/* Desktop */ body#collection-569fff59a128e6d96313cd7b .Header.loaded { background: #f1f2f3; } /* Mobile */ body#collection-569fff59a128e6d96313cd7b .Mobile-bar.Mobile-bar--top { background: #f1f2f3; }
Fixed Header
Entire Site
/* Mobile */ @media screen and (max-width:640px) { .Mobile.loaded { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } main#main { margin-top: 30px; } } /* Desktop - Tablet */ @media screen and (min-width:641px) { .Header.loaded { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } main#main { margin-top: 100px; } }
Remove Header
Entire Site
header.Header.loaded { display: none; } [data-nc-base="mobile-bar"] { display: none; }
One Page
body#collection-569fff59a128e6d96313cd7b header.Header.loaded { display: none; } body#collection-569fff59a128e6d96313cd7b [data-nc-base="mobile-bar"] { display: none; }
Footer
Footer Background Color
Entire Site
footer.Footer { background: #000; }
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer { background: #000; }
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-size: cover; background-position: center center; background-repeat: no-repeat; }
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; }
Remove Footer
Entire Site
footer.Footer { display: none !important; }
One Page
body#collection-58b5ed10bf629a356f09728a footer.Footer { display: none !important; }
Archive Page
Remove Date
span.archive-item-date-after { display: none !important; }
Blog Posts
Remove Post Date
time.Blog-meta-item.Blog-meta-item--date { display: none; }
Change “Related Posts”
h2.BlogItem-related-label { visibility: hidden; } h2.BlogItem-related-label:after { content: "Other Posts"; visibility: visible; font-family: europa; font-size: 20px; color: #ff0000; display: block; }
Remove Post Date (Related Post)
.BlogItem-related-content .Blog-meta.Blog-meta--bottom { display: none; }
Other
Page Background Color
Entire Site
.Main { background: #000; }
One Page
body#collection-58b5ed10bf629a356f09728a .Main { background: #000; }
Page Background Image
Entire Site
.Main { 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-58b5ed10bf629a356f09728a .Main { 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