My Favourite Squarespace CSS Hacks — Part 2

Jul 3

Every website should be unique and represent your business in a way that appeals to your target audience.

Squarespace offers a tightly curated collection of templates that allow you to be your own designer and come out looking like an industry leader with a polished website. However, it's easy just to choose a template, plug in your photos and text, and end up with a website that looks exactly like the thousands of others with the same layout and styling.

The customizations within Squarespace are super robust (depending on the template), but a touch of CSS code allows you to take that extra step, dive deep, and really create something that represents your brand and becomes uniquely yours.

Templates are great for the entrepreneur on the go who wants something great, fast, on a budget. Despite its DIY nature, learning to navigate the nuances of the platform can take a fair amount of time and effort. My clients hire me to avoid that hassle because they recognize that their time has value as well.

From my perspective as a Squarespace designer, templates serve as a starting point that allows me to start building a great website right away with worrying about all the back-end coding that would typically be required. Custom CSS is a great way to change the look of templates and standard blocks, so your website doesn't look like a standard template.

Welcome to part 2 of my custom CSS Series. Don't forget to check out part 1 of My Favourite Squarespace CSS Hacks.

In this edition, I'll show you how to:

Add a 'back to top' button that brings users back to the top of long scrolling pages;
Create a sticky header;
Adjust the colour, thickness, and spacing of the line block.

Let's get into it.

Add A 'Back to Top' Button

If you have long scrolling pages on your website this is a lifesaver. A 'Back to Top' button lets users scroll back to the top of the page to get to the main navigation quickly if you don't have a fixed header that stays visible when you scroll away. It's a little added touch that makes site navigation more enjoyable.

Here's how to do it:

Note: this customization requires a site header code injection. You'll need a business account or higher to use this feature.

Add the following code to you website code injection in the Header section:

Settings > Advanced > Code Injection

Add the following code to your website custom CSS Panel:

Design > Custom CSS

.hs-back-to-top {
    font-weight: 500 !important;
/* adjust this to control the colour */  
  background-color: #fff;
    color: #333;
/* adjust this to control size and position */
    bottom: 20px;     
    right: 20px;
    width: 50px;     
    height: 50px;
    display: none;
    z-index: 999;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

a.hs-back-to-top {
/* adjust this to control "top" text style */
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.8;
    padding-left: 2px;
    padding-top: 4px;    
  }

  a.hs-back-to-top .arrow:before {
    content: "\e02d";
    font-family: 'squarespace-ui-font';
/* adjust this to control arrow styling */
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    speak: none;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    display: block;
    vertical-align: middle;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    cursor: pointer;
    margin-left: -4px;
  }

Add a Sticky Header

Don't want a back to top button? Maybe you just want the header to stay put so the navigation is available all the time.

A sticky header will stay put while the rest of the page is scrolling. This one is requested a lot and it's super easy to do.

Place this code in your custom CSS panel:

.Header {
   z-index: 9999;
   position: fixed;
   width: 100%;
}

That's it! Easy.

Adjust the colour, thickness and spacing of the line block

In the Brine family of templates you can change the colour of the horizontal line block in the style editor, but you cannot change it's weight and I often find that the amount of padding it adds on the top and bottom is either a little much, or not enough.

Here's how to adjust that:

To apply the effect to the whole site, place this code in the custom CSS panel:

.sqs-block-horizontalrule hr {
  background-color: #CF000F; /* line colour */
  height: 5px; /* line thickness */
  margin-top: 0px; /* top padding */
  margin-bottom: 0px; /* bottom padding */
}

To apply the effect to only one page, add it to the page header under the advanced tab in the page's settings like this:

<style>
.sqs-block-horizontalrule hr {
  background-color: #CF000F; /* line colour */
  height: 5px; /* line thickness */
  margin-top: 0px; /* top padding */
  margin-bottom: 0px; /* bottom padding */
}
</style>

Thank you for reading through part 2 of My Favourite Squarespace CSS Hacks. Be sure to share if you know anyone who's looking to spruce up their website a little. If you haven't already, be sure to check out part 1, or this article about Customizing the Squarespace Cookie Banner.

If you're looking to customize your Squarespace website even more, check out the code shop for unique modifications that are sure to set you apart from your competition!

Browse the Code Shop ➔