HEIGHTS Template: A versatile website template designed to sell services and promote any business.
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-5751ef224c2f85ec493b876a is Page ID. Each page will have different ID.
Header
Remove Header
For entire site
/* Desktop */ .Header { display: none !important; } /* Mobile */ .Mobile.loaded { display: none; }
For one page. You need to find Page ID. See (4)
/* Desktop */ body#collection-5751ef224c2f85ec493b876a .Header { display: none !important; } /* Mobile */ body#collection-5751ef224c2f85ec493b876a .Mobile.loaded { display: none; }
Remove Site Title
For entire site
/* Desktop */ .Header-branding { display: none; } /* Mobile */ a.Mobile-bar-branding { visibility: hidden; }
For one page. You need to find Page ID first.
/* Desktop */ body#collection-5751ef224c2f85ec493b876a .Header-branding { display: none; } /* Mobile */ body#collection-5751ef224c2f85ec493b876a a.Mobile-bar-branding { visibility: hidden; }
Sticky Header
For entire site
.Header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; }
For one page
body#collection-5751ef224c2f85ec493b876a .Header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; }
Header Background Color
For entire site
/* Mobile */ .Mobile-bar { background: #ff0000; } /* Desktop */ .Header { background: #ff0000 !important; }
For one page
/* Mobile */ body#collection-5751ef224c2f85ec493b876a .Mobile-bar { background: #ff0000; } /* Desktop */ body#collection-5751ef224c2f85ec493b876a .Header { background: #ff0000 !important; }
Navigation Hover Color
.Header-nav-item:hover { color: #ff0000 !important; }
Underline Navigation Active Color
.Header-nav-item--active { text-decoration: underline !important; }
Site Title Color
For entire site
/* Desktop */ .Header-branding { color: #ff0000 !important; } /* Mobile */ a.Mobile-bar-branding { color: #ff0000 !important; }
For one page
/* Desktop */ body#collection-57892fc446c3c4fc0c4290d4 .Header-branding { color: #ff0000 !important; } /* Mobile */ body#collection-57892fc446c3c4fc0c4290d4 a.Mobile-bar-branding { color: #ff0000 !important; }
Navigation Overlay Color (Mobile)
.Mobile-overlay-menu { background-color: #ff0000; }
Replace Hamburger Menu with word “Menu”
/* Hide hamburger menu */ .Mobile-bar-menu { visibility: hidden; } /* Replace with word */ .Mobile-bar-menu:after { visibility: visible; content: "New Menu"; display: block; color: #fff; position: absolute; right: 20px; top: 30px; font-size: 10px; }
Add word “menu” next to Hamburger icon
button.Mobile-bar-menu:before { content: "Menu"; color: #fff; position: absolute; right: 50px; top: 25px; font-size: 15px; }
Force Hamburger Menu on Desktop
[data-nc-base="mobile-bar"] { display: block; } .Header { display: none !important; }
Footer
Footer Background Color
Entire Site
footer.Footer { background-color: #ff0000; }
One Page
body#collection-5751ef224c2f85ec493b876a footer.Footer { background-color: #ff0000; }
Remove Footer
Entire Site
footer.Footer { display: none !important; }
One Page
body#collection-5751ef224c2f85ec493b876a footer.Footer { display: none !important; }
Shop – Product Page
Sale – Sold out color
/* sale text */ .ProductList-statusWrapper .product-mark.sale { background: #000; color: #ff0000; font-size: 15px; border-radius: 10px; } /* Sold out text */ .ProductList-statusWrapper .product-mark.sold-out { background: #000; color: #ff0000; font-size: 15px; border-radius: 10px; }
Increase Product Detail Width
@media screen and (min-width:641px) { /* Details */ .ProductItem-details { width: 80%; padding-right: 5% !important; } /* Gallery */ .ProductItem-gallery { width: 15%; } }
Remove “From..” in Price
/* Hide from and price */ .view-item.collection-type-products .product-price { visibility: hidden; } /* Unhide Price */ span.sqs-money-native { visibility: visible; }
Remove Add to Cart
.sqs-add-to-cart-button-wrapper { display: none !important; }
Remove Social Share Icons
.ProductItem-details-share { display: none !important; }
Remove Quantity Input
.product-quantity-input { display: none !important; }
Increase Dropdown Options Size
.variant-select-wrapper option { font-size: 20px; }
Change Price Color
.ProductItem-details .product-price { color: #000 !important; }
Other
Background Color
Entire Site
.Main-content { background: #ff0000; }
One Page
body#collection-57892fc446c3c4fc0c4290d4 .Main-content { background: #ff0000; }
Remove Underline on Links
a { text-decoration: none !important; }
Featured Image: Squarespace.com