Haute Template: A striking header and grid layout promote your brand and blog with a style as bold as you.
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