How to add a site title next to your logo on Squarespace

Logo

Mar 27

When you add a logo to your Squarespace website it will automatically replace the site title.

Now for some website’s that’s fine, but sometimes you want both your logo and your site title to be displayed in your header.

If that’s the case and you want to display both your site title and your logo, you just need to add some simple code into the backend of your website. Keep reading to find out more…

How to add a site title next to your logo on Squarespace

Within your edit dashboard select edit site header and add your website logo within the site title and logo option. Doing this will automatically make the site title disappear from your header.

In order to display both, head to your Custom CSS panel and add in the below code:

.header-title-logo::after {

content: "Code examples" !important;

font-size: 24px !important;

vertical-align:middle !important;

padding-left: 30px !important;

}

.header-title-logo a {

vertical-align: middle !important;

}

Watch the video

Check out the YouTube video below 👇

The first line of this code focuses on the part of the website you want to target. Currently it’s targeting the position after the logo, if you want your site title to appear before your logo, simply switch after to before within the code.

You can also edit the site title that displays within the content section of the code, just make sure whatever title you want to display is written within the speech marks.

Vertical align ensures the site title is perfectly aligned with your logo and you can also edit the font size and padding that surrounds your site title.

And it’s as simple as that. This piece of code is a really useful one to have in your portfolio as Squarespace simply doesn’t offer you the option to display both a logo and site title together in your header without it.

For more coding hacks and Squarespace tips, check out the full suite of by Crawford articles.