Squarespace CSS tricks
The Blog
Explore the Squarespace tutorials and tips available on the site to tackle that customization or fix you’re after!
And if you can’t find what you’re looking for:
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 7.1 closer to the links
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.
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!
Creating an extended logo illusion in Squarespace (7.0 & 7.1)
With just a little bit of CSS, we can create the illusion that that background extends all the way out to the edge of the browser window, without having to move things from their place!
Creating a subtle divider for Brine's bottom header
You know those pretty and elegant headers on Pinterest where the whole nav is over the banner image but it’s subtly separated by a line that doesn’t quite reach the edges of the site? Well, for today’s CSS trick we’ll be looking into how to create that for Brine’s bottom header!
Creating a "melted" navigation in Squarespace
To celebrate the beginning of summer, I thought I’d share with you a quick customization that you can adapt for your client’s design to give its nav a really awesome, “melted”, look!
Animating the logo on hover in Brine
CSS is not always fun and games but sometimes it can be! For today’s cool CSS trick, we’ll be looking at how to create an animated logo on hover, in Brine, with a pretty simple approach!
Creating a custom overlay menu in Brine
Have you ever wondered if there’s a way to customize Brine’s overlay menu juuuust a little bit so that it looks more on-brand with your client’s site? If you’re nodding your head right now, then this tutorial is for you!
Styling the active state of menu links in Brine
Today we’ll be addressing a quick CSS trick that you can implement on any Brine template, whenever you want to highlight even further your client’s ACTIVE menu links. Let’s get to it, shall we?
How to have an additional vertical nav in Brine, without writing HTML
There are different ways to create a vertical navigation in Squarespace, and in this particular tutorial we’ll be tackling one for the Brine template that’s fixed to the side of our screen, doesn’t require a code block or any sort of HTML, and doesn’t touch our primary or secondary navigation either.
Adding folder indicators to desktop links in Brine
Today’s CSS trick is short and sweet. If you’ve been wanting to add a little folder indicator/icon to your link folders on your desktop header, here’s a quick way to achieve it with a bit of code!
Changing the color of your heading, menu items and site title, only on one page in Brine
In today’s post, we’ll be looking at what you can do when your menu navigation is readable over certain banners but not over others, without having to add a background color to it or changing the images altogether.
Changing the background color of the bottom header on just one page in Brine
When you’re working with the Brine template, and you’re using the bottom header, the navigation can overlap nicely over banner images, but that means you have to settle for a “backgroundless” header in all of the non-banner pages… or do you?