Stella Template: Lively colors and dramatic text entice new clients to book appointments.
Notes
- Adding Custom CSS to Home > Design > Custom CSS
- Adding !important to after, if CSS doesn’t work! for example: font-size: 20px !important;
- With One page. Add to Page Settings > Advanced > Header (If you use Personal Plan > Edit Page > Add Code Block > Add code)
- Send me a message if you have any questions/the code doesn’t work (free).
- You can send a donation if this is helpful for you 😉
Header
Site Title Color
Entire Site
.Header-branding { color: #ff0000 !important; }
One Page
<style> .Header-branding { color: #ff0000 !important; } </style>
Disable Site Title Link
.Header-branding { pointer-events: none; }
Hide Site Title
Entire Site
/* Desktop */ .Header-branding { display: none; } /* Mobile */ a.Mobile-bar-branding { display: none; }
One Page
<style> /* Desktop */ .Header-branding { display: none; } /* Mobile */ a.Mobile-bar-branding { display: none; } </style>
Navigation Bar Background Color
Entire Site
.Header { background: #000; }
One Page
<style> .Header { background: #000; } </style>
Hide Navigation Bar
Entire Site
.Header { display: none !important; }
One Page
<style> .Header { display: none !important; } </style>
Remove Navigation Search Icon
Entire Site
a.Mobile-bar-search { display: none; }
One Page
<style> a.Mobile-bar-search { display: none; } </style>
Mobile Menu Background Color
.Mobile-bar { background: #000; }
Mobile Navigation Overlay Color
.Mobile-overlay { background: #000 !important; } .Mobile-overlay-menu { background: #000; } button.Mobile-overlay-close { background: #000 !important; }
Remove Hamburger Icon
Entire Site
button.Mobile-bar-menu { display: none; }
One Page
<style> button.Mobile-bar-menu { display: none; } </style>
Force Mobile Header on Desktop
Entire Site
/* Unhide Mobile Header */ [data-nc-base="mobile-bar"] { display: flex; } /* Hide Desktop Header */ .Header { display: none !important; }
One Page
<style> /* Unhide Mobile Header */ [data-nc-base="mobile-bar"] { display: flex; } /* Hide Desktop Header */ .Header { display: none !important; } </style>
Decrease Navigation Overlay Width
.Mobile-overlay { width: 50%; }
Underline Navigation Active Link
You can use text-decoration: underline or
.Header-nav-item--active { border-bottom: 1px solid #fff; }
Fixed Navigation
Entire Site
.Header-inner.Header-inner--top { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: #ff0000; }
One Page
<style> .Header-inner.Header-inner--top { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: #ff0000; } </style>
Footer
Footer Background Color
Entire Site
footer.Footer { background: #fff; }
One Page
<style> footer.Footer { background: #fff; } </style>
Remove Footer
Entire Site
footer.Footer { display: none !important; }
One Page
<style> footer.Footer { display: none !important; } </style>
Newsletter Button Style
.newsletter-form-button { background: #ff0000 !important; border-color: #fff !important; font-size: 20px !important; text-transform: lowercase !important; border-radius: 20px !important; color: #000 !important; }
Other
Page background color
Add to Page Settings > Advanced > Header. Disable Ajax Loading if the code doesn’t work.
(You can also edit page > Add Code Block > Insert code)
<style> section.Main-content { background: red; } </style>
Featured Image: Squarespace.com
Hello! Im trying to change the background of certain pages to red/orange and I cannot find the proper CSS for it. Could you help me out!?
An example is this pages:
https://www.miscaustin.com/allrentals
https://www.miscaustin.com/services-2
Thank you!
See this code. https://beaverhero.com/stella-squarespace/#Page_background_color