My favourite tweaks for Squarespace websites using easy css codes - just copy and paste!

The thing we love most about Squarespace is how user friendly it is for our clients to update content as they like - it is also so user-friendly that almost anyone can build a website on Squarespace without coding experience or being an experienced designer.

When you add a block, you're adding HTML to your site without writing the code yourself. Similarly, when you make style changes, you're changing your site's CSS. The Squarespace platform is powerful and flexible, and you can solve most design challenges with built-in style options, but to really give your website flare, you can use custom code.

Are you wanting to make some design changes to your website that give it a bit more of a WOW factor beyond Squarespace’s regular themes? Then CSS may be your new best friend. Please don’t be scared away by a little coding!

We have pulled together our favourite CSS codes to elevate your Squarespace website, and we are going to give you a step by step guide of how to add them to your site!

You can build a website on Squarespace without coding or design expertise.

How to add CSS to your Squarespace Website

• Copy and paste the entire code in to your CSS Panel (Website > Pages > Scroll to the bottom under Utilities > Website Tools > Custom CSS).

• Make sure when you are editing the colour or size codes in any of these codes that you don’t remove any other characters accidentally as this will break the code.

Here are some simple CSS codes you can add to your own Squarespace website.

Changing font size on mobile menu 

This is such a small change that can make such a big difference. For some reason Squarespace’s mobile menu default size is very large and can look quite bulky and messy especially with large websites with more pages.

Copy and Paste the code below into your website CSS and change the font size to suit your design.

NOTE: Be sure not to make the font size too small as this will be detrimental to your user experience and SEO.

.header-menu-nav-item a {

    font-size: 12px;

}

Adding a Vertical Line

Adding a horizontal line to your Squarespace website is easy, you simply use the standard line block. But vertical lines are one of our favourite design elements to help lead users in a certain direction and add flare to minimalist designs.

Here is how you can add one to your website:

Step 1: Add a code block

Do this by adding a block to your section:

+ ADD BLOCK

Find the Code Block Labelled:

</> Code

In the code block, enter:

<div class="vertical-line"></div>

Step 2: Use CSS to Style the Line

In the your site’s custom CSS (Design > Custom CSS), use this code to edit the style:

.vertical-line {

border-left: 1px solid #000000; // defines the width, style and colour of the line (change the hex code [#303030] to suit your site branding).

height: 300px; // this is the length of the line.

position: absolute;

left: 50%; //move the line to the middle (50% of the page width)

margin-left: -1px; //half the width of border width to ensure the line is centred on the page.

top: 0;

}

Don’t want to muck around with coding?

Another way to add a vertical line is to use the *Spark Plugin. This Plugin allows you to simply edit the horizontal line block on your website and turn it whatever way you want with the click of a button!

You can even change the shape, weight, colour and add effects like ‘hover reveal’.

Sold on the simple option? Try it here.

Add a 3D Button Effect

This is a fun design that puts a solid dropshadow on your button, and also switches the colors on when you hover over it! 

Check out the example below!

Here is the code, and I’ll talk you through how to use it below:

.sqs-block-button-element--small.sqs-block-button-element { 
background-color:#F5AE70;
color:#ffffff;
box-shadow: 4px 4px #462000;
}

.sqs-block-button-element--small.sqs-block-button-element:hover {
background-color:#462000;
color:#ffffff;
box-shadow: 4px 4px #F5AE70;
}

HOW TO USE IT:

• This code is intended to overwrite the Tertiary Squarespace Button (this is the ‘small’ button on your site which is why the code uses the word ‘small’. If you want it to overwrite the Primary (large) or Secondary (medium) buttons, you can change where it says “small” in both sections of the code to either “medium” or “large”.

• Your font settings for this button will be found and can be edited in the Style Settings under the tertiary button block settings.

• The first section of code is for the visible button, the second section is for when you hover over the button.

• You can change the background colors of the visible and the hover button by editing the color hex code after “background-color:”.

• You can change the font colors of the visible and the hover button by editing the color hex code after “color:”.

• You can change the shadow color of the visible and the hover button by editing the color hex code after “box-shadow”.

You are in luck, the Spark Plugin also includes special button effects!

Want an easy way to make your buttons stand out? Try it here.

Let’s Get Designing.

Now, you can 100% build a beautiful Squarespace Website without coding, but if you are ready to take your website to the next level, these are some simple CSS codes that you can try out to familiarise yourself with how to use the CSS editor.

Need some help designing your Squarespace website? Or just need some help making special customisations using code?

Get in touch with us today for Squarespace Website Support.

This post contains affiliate links. When you click on an affiliate link and make a purchase, I receive a small commission at no cost to you. Affiliate links are marked with an asterisk (*).