My Eight Favorite CSS Snippets for Squarespace
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 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, a pop of personality.
My Favorite Squarespace CSS Code Snippets
that I use on almost every website - including all 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 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 user engagement.
I found this article that got me on the custom bullet train when I was first starting out.
Here’s a code for custom bullet points I used for a few months (I change them up every few months because I have the attention span of a gnat):
// Custom Bullets //
ul[data-rte-list] li > *:first-child::before {
content: "\27E1";
font-weight: 500;
color: #30bced;
}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.
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.
Here is example code; change out for your brand colors and personal style:
// 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;
}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.
Below is a rounded box hover, which I’ve used on my website before. To change it to pill, just change the padding.
// 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;
}
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 below:
// 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;
}05. Remove Underline Links in Footer
Removing underlines from footer links can make your website look cleaner and more modern.
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.
//Remove Underline Links in Footer//
footer a {
text-decoration: none !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.
// Mobile Menu Icon Color //
.burger-inner > div {
background-color: #30bced !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.
//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;
}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.
// Newsletter Block Buttons //
.newsletter-block .newsletter-form-button-wrapper .newsletter-form-button {
color: #FFFFFF !important;
background-color: #FF9230 !important;
}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.
