Motto Template: Showcase your culinary creations with beautifully styled imagery and a website template designed to give structure to your own unique brand.
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
Disable Logo Link
.Header-branding { pointer-events: none; } a.Mobile-bar-branding { pointer-events: none; }
Remove Logo
Entire Site
a.Mobile-bar-branding { display: none; } .Header-branding { display: none; }
One Page
body#collection-575b09d9cf80a1342657d69f a.Mobile-bar-branding { display: none; } body#collection-575b09d9cf80a1342657d69f .Header-branding { display: none; }
Navigation Hover Color
.Header-nav-item:hover { color: #ff0000 !important; }
Strike Navigation Hover
.Header-nav-item:hover { text-decoration: line-through; }
Remove Navigation
Entire Site
.Header-nav-inner { display: none; }
One Page
body#collection-575b09d9cf80a1342657d69f .Header-nav-inner { display: none; }
Logo (Right) – Hamburger Icon (Left)
.Mobile-bar.Mobile-bar--top { flex-direction: row-reverse; }
Replace Hamburger Icon with word “Menu”
.Mobile-bar-menu:before { visibility: visible; content: "Menu"; color: #ff0000; font-size: 20px; position: absolute; right: 50px; top: 30px; } .Mobile-bar-menu { visibility: hidden; }
Add word “Menu” beside Hamburger Icon
.Mobile-bar-menu:before { content: "Menu"; color: #ff0000; font-size: 20px; position: absolute; right: 50px; top: 30px; }
Change Hamburger Icon Color
.Mobile-bar-menu svg { stroke: #ff0000; }
Overlay Navigation Width
.Mobile-overlay { width: 50%; }
Overlay Navigation Color
.Mobile-overlay { background: #f1f2f3 !important; } .Mobile-overlay-menu { background: #f1f2f3; } button.Mobile-overlay-close { background: #f1f2f3 !important; }
Change “X” close icon color
.is-mobile-overlay-active .Mobile-overlay-close { stroke: #ff0000 !important; }
Remove Hamburger Icon
Entire Site
button.Mobile-bar-menu { display: none; }
One Page
body#collection-575b09d9cf80a1342657d69f button.Mobile-bar-menu { display: none; }
Force Mobile Header on Desktop
.Header-inner.Header-inner--top { display: none !important; } [data-nc-base="mobile-bar"] { display: flex; }
Fixed Header
.Header-inner.Header-inner--top { position: fixed; top: 25px; left: 25px; right: 25px; z-index: 999; }
Header Background Color
Entire Site
/* Desktop */ .Header-inner.Header-inner--top { background: #f1f2f3; } /* Mobile */ .Mobile-bar.Mobile-bar--top { background: #f1f2f3; }
One Page
/* Desktop */ body#collection-575b09d9cf80a1342657d69f .Header-inner.Header-inner--top { background: #f1f2f3; } /* Mobile */ body#collection-575b09d9cf80a1342657d69f .Mobile-bar.Mobile-bar--top { background: #f1f2f3; }
Remove Header
Entire Site
/* Desktop */ .Header-inner { display: none !important; } /* Mobile */ .Mobile-bar.Mobile-bar--top { display: none; }
One Page
/* Desktop */ body#collection-575b09d9cf80a1342657d69f .Header-inner { display: none !important; } /* Mobile */ body#collection-575b09d9cf80a1342657d69f .Mobile-bar.Mobile-bar--top { display: none; }
Footer
Footer Background Color
Entire Site
footer.Footer { background: #f1f2f3; }
One Page
body#collection-575b09d9cf80a1342657d69f footer.Footer { background: #f1f2f3; }
Footer Background Image
Entire Site
footer.Footer { background-image: url(https://images.squarespace-cdn.com/content/v1/572785f…/1469…5cNQhYFepEfMHUQ-Ith7WQTVRzMaWElkziY6KISdIaYEg/image-asset.jpeg?format=750w); background-repeat: no-repeat; background-size: cover; background-position: center center; }
One Page
body#collection-575b09d9cf80a1342657d69f footer.Footer { background-image: url(https://images.squarespace-cdn.com/content/v1/572785f…/1469…5cNQhYFepEfMHUQ-Ith7WQTVRzMaWElkziY6KISdIaYEg/image-asset.jpeg?format=750w); background-repeat: no-repeat; background-size: cover; background-position: center center; }
Change Footer Social Icon on Hover
footer.Footer .social-icons-color-black.social-icons-style-knockout .sqs-use--mask:hover { fill: #ff0000 !important; }
Remove Footer
Entire Site
footer.Footer a { display: none; }
One Page
body#collection-575b09d9cf80a1342657d69f footer.Footer a { display: none; }
Remove Footer Navigation Underline
footer.Footer a { border-bottom: none; }
Other
Remove Site Border
Entire Site
.Site { border: none !important; }
One Page
body#collection-575b09d9cf80a1342657d69f .Site { border: none !important; }
Page Background Color
Entire Site
.Main { background: #f1f2f3; }
One Page
body#collection-575b09d9cf80a1342657d69f .Main { background: #f1f2f3; }
Page Background Image
Entire Site
.Main { background-image: url(https://images.squarespace-cdn.com/content/v1/572785f…/1469…5cNQhYFepEfMHUQ-Ith7WQTVRzMaWElkziY6KISdIaYEg/image-asset.jpeg?format=750w); background-repeat: no-repeat; background-size: cover; background-position: center center; }
One Page
body#collection-575b09d9cf80a1342657d69f .Main { background-image: url(https://images.squarespace-cdn.com/content/v1/572785f…/1469…5cNQhYFepEfMHUQ-Ith7WQTVRzMaWElkziY6KISdIaYEg/image-asset.jpeg?format=750w); background-repeat: no-repeat; background-size: cover; background-position: center center; }
Change Site Border Color
Entire Site
.Site { border: 20px solid #000 !important; }
One Page
body#collection-575b09d9cf80a1342657d69f .Site { border: 20px solid #000 !important; }
Featured Image: Squarespace.com