Eight CSS Snippets for Squarespace That I Use All The Time
Table of Contents Show
If you caught my blog post last week, I shared a beginner’s guide to using CSS on Squarespace. It’s definitely a broad look at using CSS, but I hope you found it helpful.
This week, I want to share some of my favorite Squarespace CSS snippets. These are ones that I keep coming back to again and again, for both my website and for a lot of my clients. They’re all easy to use little snippets that make a big difference and add a little more zhuzh to your website.
My Favorite Squarespace CSS Code Snippets
…that I’ve use on almost every website - including my clients’ sites, plus my own!
Below I’m sharing the CSS snippets I use on a lot of my client’s websites – and on my personal site! I’m taking the code directly from my own website to share with you.
Update the hex colors, spacing, and symbols to match your own brand.
01. Bullet Points
// Custom Bullets //
ul[data-rte-list] li > *:first-child::before {
content: "\27E1";
font-weight: 500;
color: #30bced;
}Custom bullet points on your Squarespace site make it stand out and match your brand's style. These bespoke elements also show attention to detail and consistency in your brand identity, showing your personality and potentially increasing interest and engagement.
I found this article that got me on the custom bullet train when I was first starting out.
// Change Color On Hover Header Button //
.header-actions .btn {
transition: all 0.3s !important;
}
.header-actions .btn:hover {
color: #FFFFFF;
background-color: #30bced;
opacity: 1 !important;
}02. Change Header Button on Hover
Changing the header button on hover in your website design catches the user's attention and guides them to take action, like clicking a link or signing up for your email list.
This small change can make the button more noticeable and interactive, which improves the user experience. You’re giving a visual cue that says, "Hey, look here!" This not only makes your site more engaging but also helps with guiding your visitors to important areas or actions you want them to take.
// Header Navigation - Box with Slightly Rounded Corners Hover Style //
.header-nav-item a {
padding: 6px 14px !important;
background-image: none !important;
transition: all ease-in-out 0.2s !important;
}
.header-nav-item a:hover {
background: #30BCED !important;
padding: 12px 12px;
border-radius: 5px; /* Adjusted for slightly rounded corners */
color: #FFFFFF !important;
}
03. Add Pill or Box Navigation on Hover
Adding pill or box navigation on hover to your website is a great way to improve navigation.
It highlights menu items clearly when a user hovers over them, making it easier for them to see their choices.
This style can make your website look more professional and reflect your own personality and brand. It also enhances the user experience by providing a smooth and intuitive way to navigate through your site, encouraging visitors to explore more content.
Here is a rounded box hover, which I’ve used on my site before. (To change it to pill, just change the padding.)
// Link hover code //
.sqs-block-html a {
text-decoration: none !important;
box-shadow: inset 0 -1px 0 0 rgba(48, 188, 237, 1) !important;
color: inherit !important;
transition: box-shadow 200ms !important;
background-image: none !important;
}
.sqs-block-html a:hover {
box-shadow: inset 0 -10px 0 0 rgba(48, 188, 237, .5) !important;
}04. Dynamic Link Hover Effects
In changing the hover code for links throughout the website, we make it clear and simple for users. A change in color or an underline shows them where they are, guiding them with clarity and a pop of personality. It’s a small change with a big impact.
Substitute your brand colors for the colors in this code:
//Remove Underline Links in Footer//
footer a {
text-decoration: none !important;
}05. Remove Underline Links in Footer
Removing underlines from footer links can make your website look cleaner and more modern. A lot of designers love doing this.
It helps the text in the footer to be easier to read and keeps the design consistent with the rest of your site. While underlines are traditional for showing links, today's users recognize links through other cues like color changes. So, taking away underlines can improve the overall look and feel of your site, as long as links are still clearly visible in another way.
// Mobile Menu Icon Color //
.burger-inner > div {
background-color: #30bced !important;
}06. Mobile Menu Icon Color
Changing the color of your mobile menu icon is key for making it easy to see and use. It helps the icon stand out and match your brand's look. A good color choice can also make your site more user-friendly and on-brand, and it's great for making sure everyone, including people with visual challenges, can navigate your site easily.
//Line Height and Color in the Dropdown Menu//
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
line-height: 1.5 !important;
margin-left: 10px !important;
}
.header-nav-folder-content {
background: #f2eafd !important;
}07. Line Height and Color in Dropdown Menu
Adjusting line height and color in your dropdown menu is great for making it easy to read and visually appealing. The right line height prevents text from looking too cramped or too spread out, enhancing readability.
Color choices not only make the menu clear and visible against various backgrounds, but also align with your brand's color scheme.
// Newsletter Block Buttons //
.newsletter-block .newsletter-form-button-wrapper .newsletter-form-button {
color: #FFFFFF !important;
background-color: #FF9230 !important;
}08. Change the Button Color in the Newsletter Block
Changing the button color in the newsletter block is a helpful way to grab attention and encourage more sign-ups. A standout color makes the button more visible, matching your brand colors for a unified look. This adds a fun touch to your website while also making it easier and more appealing for visitors to subscribe to your newsletter.
Two other favorite resources
Inside the Square loads of great resources and tutorials, most of them free, but some great paid options as well - the CSS Cheat Sheet she offers is a valuable resource.
Rache from SquareStylist offers this Standout Squarespace course*. I’ve taken the Foundations course*, and it is absolutely incredible. She also shares free YouTube tutorials.
