The Codebase
Browse all Resources!
Look up that Squarespace tutorial, plugin, snippet or course that’s gonna help you customize your current personal or client project.
Alternate logo for open mobile menu - Header nav (7.1)
If you're working with a different color theme for your 7.1 site's overlay menu and you need to change your logo color to make it pop, this is the code snippet for you!
Logo page redirect - Header nav (7.1)
The reason why you’re doing it is not important, what matters is that there’s a solution for it. If you want to have your logo redirect to a page other than your homepage in your Squarespace 7.1 site, get your hands on this code snippet to make that happen in just a few minutes!
Mobile nav on demand - Header nav (7.1)
Wishing you could bring up the burger button and mobile menu on tablets in your 7.1 site? Wish no more with this handy little snippet! Copy/paste this code into your Squarespace site and you’ll be able to have the mobile nav instantly show up at the breakpoint of your choice, to either avoid frustrating issues with excess nav links on tablet-ish devices or simply create a minimal look on desktop!
Creating a scrolling text header button in Squarespace (7.1)
Want to make the header button of your Squarespace project unmissable? Then why not turn it into a mini scrolling marquee with today's CSS trick! Let's get to it.
Customize and add an image to your Squarespace announcement bar (7.0 & 7.1)
Take a look at how you can create a super custom announcement bar look in Squarespace with a couple of CSS tricks and an icon or image!
Keeping centered navigation links in one single line, in Squarespace (7.1)
Struggling to keep your 7.1 navigation links in one single line? Not anymore! With this week’s CSS trick you’ll be able to fix that little issue in a hearbeat.
How to modify the space between the header social icons in Squarespace (7.1)
Looking to modify the spacing between social icons in Squarespace 7.1’s header? Then take a look at today’s CSS trick!
Styling the active nav links in Squarespace (7.1)
In today’s tutorial, we’ll be getting rid of the underline of active links in Squarespace 7.1, and setting our own styles with a little bit of CSS!
Moving the mobile menu button in Squarespace closer to the links (7.1)
In today’s tutorial, we’ll be looking into how we can bring the button inside the mobile nav of Squarespace 7.1, closer to the links!
How to create a business info bar above the header in Squarespace (7.0 & 7.1)
In today’s tutorial, we’ll be creating a business info bar that carries the hours, email and phone number of a hypothetical company with the help of HTML and our friend, CSS.
How to make folder titles clickable in Squarespace (7.0 & 7.1)
Are you using folders in your Squarespace site’s navigation? Do you want to make the titles clickable? If so, tutorial will help you achieve that in no time!
Easily create a multilingual site in Squarespace (7.0 & 7.1)
Want to add a free translation widget to your Squarespace site? Then take a look at how you can easily set that up and style it with this simple CSS trick.
Custom burger button for mobile (Brine 7.0) - Header nav
If you’re looking to go the extra mile with your site’s customization and be able to use your own custom burger button in Squarespace 7.0 (Brine family), this is the snippet for you! You’ll be able to replace the native lines in no time and showcase your branded version by simply using the image’s URL.
Stacked tagline under logo (Brine 7.0) - Header nav
Reorganize the way the logo and tagline display on your Squarespace 7.0 (Brine family) project with this short code. Regardless of the position of your logo + tagline within the header area, you’ll be able to adapt the snippet to make it work for your specific situation, and have the two elements stack in just a few minutes.
Background color for top header on one page (Brine 7.0) - Header nav
If you want to add a background color to the Top Header of some pages inside your Squarespace 7.0 site (Brine family), this copy/paste code is for you. You can set any kind of color code you want for the specified pages, and have your nav stay transparent (or use a different color) on all other pages.
Sliding lines on hover for nav links (Brine 7.0) - Header nav
Looking to add a little something to your navigation links in Squarespace (Brine 7.0)? Then grab this quick code snippet to add a simple yet interesting-looking hover effect! You’ll get two sliding lines, of the color and thickness of your choice, marking the link your user is hovering over while on desktop devices.
Custom burger button for mobile (7.1) - Header nav
If you’re looking to go the extra mile with your site’s customization and be able to use your own custom burger button in Squarespace 7.1, this is the snippet for you! You’ll be able to replace the native lines in no time and showcase your branded version by simply using the image’s URL.
Sliding lines on hover for nav links (7.1) - Header nav
Looking to add a little something to your navigation links in Squarespace? Then grab this quick code snippet to add a simple yet interesting-looking hover effect! You’ll get two sliding lines, of the color and thickness of your choice, marking the link your user is hovering over while on desktop devices.
2 simple ways to create a sticky content navigation (7.0 & 7.1)
Let’s create that sticky content navigation you’ve been wanting to add to your client’s site, in 2 different ways!