The Best Squarespace CSS Codes for Your Website
Squarespace is a really popular option for website creation and hosting for it’s ability to run a multi-service or product business as well as it’s new drag and drop features for it’s design. However, sometimes we just want to add that edge and “je-ne-sai-quois” to our website so it stands out!
I’ve compiled all of my absolute favourite custom CSS codes that we work with for our client websites or our own so you can save them and use them how you please!
Animated Underline for Navigation Links
Simply copy and paste the code provided below into the Design > Custom CSS section on your Squarespace website and update the colors, height of the line, and margin-spacing if desired.
// Navigation Line hover effect//
.header-nav-item::after {
content: '';
background-color: #D8D2CB;
height: 1.5px; //thickness
width: 0;
display: block;
margin-top: 1.5px !important;
transform: scaleX(1);
transition: width 1s ease;
margin: 0 auto;
}
.header-nav-item:hover::after {
width: 100%;
}
.header-nav-item--active a {
background-image: none !important;}
Custom Scroll Bar
Simply copy and paste the code into the Design > Custom CSS section on your Squarespace website.
You’ll need to change the values of the width of the scrollbar if desired and the color values to match your site’s branding.
//Custom Scroll Bar//
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #fff; border-left:1px solid #333 }
::-webkit-scrollbar-thumb { background-color: #333; border-radius: 1rem; }
Change The Text Size on the Mobile Menu
Simply copy and paste the code provided below into the Design > Custom CSS section on your Squarespace website and change the values of the font size and weight.
//Mobile Menu Text Change//
@media screen and (max-width: 767px)
{ .header-menu-nav-item a { font-size: 20px; font-weight: 300; } }
Custom Dropdown Menu & Hover Effects
Simply copy and paste the codes below for any design changes you would want to make to your drop down menu in the Design > Custom CSS of your Squarespace Website.
Play around with the color values and any spacing until you’re happy.
//Dropdown Menu Background Color//
.header-nav-folder-content{background-color:#FFF!important}
//Dropdown Menu Line Borders Between Elements//
.header-nav-folder-content a {border-bottom:1px solid #000}
//Dropdown Menu Increasing Spacing Between Elements//
.header-nav-folder-content a {padding-bottom:.5rem!important; }
Change Hover Color of Page Social Media Icons
Simply copy and paste the codes below for any design changes you would want to make to your drop down menu in the Design > Custom CSS of your Squarespace Website.
Change around with the color values to suit your website’s branding.
//Social Media Icon Hover Effect//
.sqs-use--icon:hover {fill: #000000!important;} //changes the icon colour on hover//
.sqs-use--mask {fill: #D41ECE!important;} //changes the icon background colour on hover//
.sqs-svg-icon--wrapper {border-color: #E5E3E5!important} //changes the border colour on hover//
CUSTOM WEBSITE DESIGN MADE EASY!
Need Help Designing an Influential & Innovative Website? We Got You!
Welcome
I’M DANIELLE LABONTÉ
Brand and website designer working with ambitious entrepreneurs, leaders, and scaling companies seeking impactful and refined branding built upon both strategy and storytelling.
TUNE INTO BREWING UP CREATIVITY PODCAST
Looking for a bi-weekly dose of creative inspiration? Our podcast offers insight, tips, personal moments, and motivation for creatives of all backgrounds and female business owners.