How to Add a Site Title Next to Your Logo on Squarespace (And Change the Color)
Learn how to easily add a site title next to your logo image on Squarespace so you can have a great lookin’ website :)
How to add a site title next to your logo on Squarespace header with white arrow pointing to Venture Homes & logo
Want to display your site title next to your logo in Squarespace?
It’s not as hard as you think, in fact, it’s a common branding request.
Here’s the catch though…
This functionality is not natively supported by Squarespace. When you upload a logo, the site title typically disappears. So if you’re expecting both to appear side-by-side automatically, it can be frustrating.
Luckily, there are two main workarounds to get the look you want:
CSS Customization: Use a bit of custom code to force the logo and site title to display together. (my preferred method)
Design Workaround: Combine your logo and site title into a single image file and upload it as your logo.
Bonus: In either approach, you’ll have the option to customize the color of your site title, which is perfect for keeping things on-brand and visually consistent.
Prefer to watch instead? If you’re more of a visual learner, I created a step-by-step video tutorial that walks you through the entire process. From combining your logo and site title to customizing the color with CSS. You can watch the full tutorial below and follow along at your own pace.
Learn how to add a custom site title next to your logo image by watching me do it!
-
[00:00:00.00]
How to add a site title right next to a site logo on Squarespace, and change the color. So the first thing that we're going to want to do is, as you can see, I'm already on a Squarespace website. This is what we call the back-end, because as you can see, you have a bunch of tools here on the left, and then you have the editor on the right. So if you click on Website Pages, and then click on whatever page you want to go to, I'm just going to do the homepage. Click Edit, click Edit, Click on Edit Site Header, click on the Site Title and Logo, and click on the Pencil. As you can see, I already have a site title in there. It's Venture Homes. And there's two ways that we can go about having both the site title and the site logo displayed at the same time. The first way is pretty simple. It's the easiest way. The second way is also pretty simple, but it can be a little bit confusing to beginners or people that just aren't familiar with Custom CSS. So we have the site title here. And if I try to add a logo, it's going to replace this with the logo.
[00:01:11.19]
And so if it was just a blank logo here without the site title next to it, again, it would just automatically replace and not add. So I just added this image. This is a PNG image that I had made earlier. And as you can see, I It looks pretty good, pretty simple to do, but we're going to do the Custom CSS method now. So let's go ahead and replace this with just the logo. So we just got this nice, simple logo here. Click Save, click Exit. Then you're going to scroll down to the bottom and click Custom Code, Custom CSS. And this is where we're going copy and paste our code. So let me come over here real quick. And I'm going to copy and paste. So the code for this is also going to be available in the description. And you can stay tuned to the end of this video for a little something, something. But for now, let's go ahead and paste this in here. So what I just did was I added the CSS. And as you can see, we have now this black text here that says site title. I'll explain this a little bit.
[00:02:35.17]
You don't really need to know. Obviously, it just worked if you copied and paste it. We have the selector. This is what it's targeting, the header title logo. We have after, which means it's coming to the right of it or after. You can also change this if you wanted to, to see how it looks before, but I think it looks better for this anyway after. We have the content, and so this is what it's displaying. We need to change this to Venture Homes. Boom. Then we have the font size, which is 50 pixels, and that is a bit too large. Let's do 30 or something, maybe 25. Yeah, it's not bad. Okay, so then we have the vertical line. So this is in the middle. If I move this to top or bottom, it would obviously shift the position here, and then you could also do that here as well. But I think just having it straight in the middle looks the best. So then we have the padding left, and this is basically the distance here between the site title and the logo or the position to the left of the site title. We're going to take this down a bit because it's a little too big.
[00:04:11.14]
If we did 14, That's not too bad. Maybe we'll do 12. As you can see, that's it. You can just use this and add it in there. But the problem here for me is that I don't really like how it's black and it doesn't really match the look I'm trying to go for. So one thing that you can... Or two things that you can do because we want to change the color, is we're going to add font weight. Font, weight. And then we're going to do bold. And then we're going to also do color Oh, my gosh, I can't type. I can't see. White. I can't. Okay, here we go. We have color white, and then we made it bold. I think that that looks a lot better. Now, if I were to take this out, you could still see how it looks, just white. But I don't know, it looks a little dinky. So I like it looking like that. So that's it. Like I said, the code for this is going to be in the description. So go ahead and check that out. You can also check out other blog posts, other tutorials, stuff like that.
[00:05:46.13]
And if you have stayed all the way to the end, and I said there's going to be a little something, something, it's basically where I just explain to you a little bit about what I do and who I am. So if you're not interested in that and you just came here for the tutorial, you You can click off. It's fine. So I am Abby Castillo. I'm a Squarespace web designer, and I help businesses all over the US get strategic, beautiful websites. If you have a website in mind and you're looking to build it on Squarespace and you just don't have the time or the energy. Maybe you already have a huge team that you have to manage, or maybe you have a family, or your small business is just blowing up and you just can't delegate time to do web design. That's fine. If you want to get connected, you can go to designwithabby. Com. You can book a free call with me, and we can talk about your goals, what you want your future site to look like, and see if we are a great fit to bring it to life. See you there.
Understanding Squarespace’s Default Behavior
Before we dive into it, it’s helpful to understand how Squarespace handles logos and site titles by default.
Logo Replaces the Site Title
When you upload a logo in Squarespace, it automatically replaces the site title in your site’s header. That means only the logo will be visible, and your text-based site title disappears from view. While this behavior is intended to streamline the header, it limits design flexibility for brands/designers that want both.
Differences in Squarespace Versions
This limitation is especially present in Squarespace 7.1, the platform’s most widely used version. Unlike earlier templates in version 7.0, most 7.1 templates are more rigid in layout and don’t support both a logo and text title natively.
Why Squarespace Doesn’t Support Both
Squarespace prioritizes a clean, minimal design framework. Their default setup assumes you’ll choose either a logo image or a text site title, but not both. While this works for some users, it leaves others searching for a way to do both and still have it look good.
The Need for a Workaround
Since this feature isn’t built-in, you’ll need to get creative with a visual design hack or apply custom CSS code. Both approaches have pros and cons, but the good news is: it’s completely possible to make it happen.
Method 1 – Use Custom CSS (Advanced Option)
If you want your site title to remain as editable text, which is better for SEO, screen readers, and overall accessibility, then this method is for you. With a bit of custom CSS, you can force Squarespace to display both your logo and site title side by side in the header.
This method requires some comfort with CSS and inspecting your site’s structure, but the results are clean and flexible.
Why Use CSS
There are a few strong reasons to go this route:
SEO-Friendly: Your site title stays as real, readable text for search engines.
Accessibility: Screen readers and other assistive tools can interpret your site title.
Styling Flexibility: You can easily tweak color, spacing, font size, and layout in the code.
Step-by-Step Instructions
Upload your logo as usual:
Go to Edit Site Header > Site Title & Logo and upload your image logo.Go to Custom CSS Settings:
Navigate to Pages > Custom CSS down at the bottom.Add Code Styling:
Paste the following CSS into the editor to position your logo and site title side by side:
.header-title-logo::after {
content: "site title" !important;
font-size: 50px !important;
vertical-align: middle !important;
font-weight: bold !important;color: white !important;
padding-left: 50px !important;
}
.header-title-logo a {
vertical-align: middle !important;
}
You may need to change .header-title-logo to match your template. See the section below for how to find those.
Finding the Right CSS Selectors
Squarespace templates use different class names for header elements. To find yours:
Right-click your header in Chrome (or use Inspect Element in your browser).
Look for the div containing your logo and title, this usually has classes like .header-branding, .site-title, or .logo-image.
Update your CSS selectors to match your site’s exact structure.
If you get stuck, the Squarespace Community Forums and articles like this one are great places to look for help.
Caution Note
Custom CSS is not officially supported by Squarespace. That means if you run into layout issues, support may not be able to help.
Always test your header on multiple screen sizes. Especially mobile.
Consider using a backup or testing in a duplicate site if you're unsure.
How to Change the Site Title Color
Whether you're using the default site title or a custom CSS solution, you’ll likely want to match your site title color to your brand. Here are two ways to do it:
Option A: Use the Custom CSS color property you just created
If you’re using the CSS method or want more control, you can define the site title color directly by using the color property:
.header-title-logo::after {
content: "site title" !important;
font-size: 24px !important;
vertical-align: middle !important;
font-weight: bold;color: white;
padding-left: 12px !important;
}
.header-title-logo a {
vertical-align: middle !important;
}
Within the code, find the “color: white” property and change “white” to any color you need to by using the name of the color itself (red, blue, black), or its hex code (#f8f8f8). You can also adjust font size (font-size: 24px !important;), spacing (padding-left: 12px !important;), or weight (font-weight: bold;) here if you’d like.
Option B: Use The Site Styles Panel (No Code)
Hover over your header and click Edit Site Header
Click the Style icon or go to Site Styles > Colors
Select your current color theme
Scroll to find Site Title – Header
Use the color picker or paste in your hex code to choose your desired color
This is the simplest way to change the color without using code. Note: if the color you added in the color property isn’t showing, try adding “!important;” at the end of it.
Ready to work with a designer to get an awesome, high-converting website? Book a call and let’s chat!
Method 2 – Combine Logo and Site Title into One Image (Very easy)
If you're looking for the simplest way to display your site title next to your logo, this method is for you. Rather than trying to force Squarespace to do something it doesn’t natively support, you’ll simply create a single image that includes both your logo and your brand name side by side.
This approach gives you total visual control and works across all templates, so no code required.
How to Create the Image
You’ll need a design tool to create your combined logo/title image. Here’s how:
Open a design tool like Canva, Photoshop, or any image editor you prefer.
Place your logo image on the left and your site title as text on the right.
Choose your desired font, size, and spacing to match your brand.
Use a transparent background (ideal for flexibility) or match your header background color.
Export the file as a PNG (for transparency) or JPG (for solid backgrounds).
Tip: Make sure your image isn’t too tall, because headers look best with horizontally-stretched logo/title combos.
How to Upload It in Squarespace
Once you’ve created your combined image, adding it to your site is easy:
In Squarespace, go to Edit Site Header.
Click Site Title & Logo in the settings panel.
Upload your new combined image as the logo.
Save your changes and preview it on desktop and mobile.
That’s it! You now have your logo and site title appearing together just the way you want.
Pros and cons to logo image with site title:
This method is ideal if you want a fast, consistent solution that looks good on all screen sizes without diving into CSS. If keeping your site title as text is important for SEO or accessibility, you might prefer the CSS method in the next section.
Additional Tips and Best Practices
Even after you’ve added your site title next to your logo, there are a few more things to keep in mind to ensure the best performance, appearance, and user experience.
SEO Tip
If you're using a combined image with both your logo and site title, remember: search engines can’t read image text. To protect your SEO, be sure to:
Add alt text -if you can- to your image that includes your business name or site title.
Keep the text concise, relevant, and brand-aligned.
Mobile Optimization
Headers can look great on desktop but break on mobile if not properly styled. Always:
Preview your site in mobile mode using the built-in Squarespace preview.
Make sure the logo and title scale properly and don’t overlap or shrink too small.
Adjust spacing or font size via CSS if needed.
Accessibility Reminder
Text-based site titles are more than just SEO-friendly, they’re crucial for accessibility. Screen readers, voice navigation tools, and assistive devices rely on readable HTML text. If accessibility is important to your audience, the CSS method is the better choice.
Resources and References
If you need more guidance then check out these great resources for further reading and support:
Official Squarespace Articles
Video Tutorials & Blog Guides
Community Threads & Developer Tips
These guides offer real-life solutions from experienced users and designers who’ve worked around the same limitations.
Conclusion
While Squarespace doesn’t natively support displaying a logo and site title side by side, it’s absolutely possible with a little creativity.
If you want something fast and easy, go with the image workaround, because it’s quick to set up and doesn’t require code.
If SEO, accessibility, or long-term flexibility matters more, the custom CSS method is the better choice.
Whichever route you take, make sure to test your header across devices, preview for mobile, and use your site title strategically to support your branding and search visibility.
Need help styling your header? Reach out! I’d be happy to take a look or provide support tailored to your template.
Abby Castillo
Let’s Connect
Check out more step-by-step tutorials!
Subscribe to my YouTube channel @designwithabby for easy-to-follow Squarespace tips, design walkthroughs, and CSS learning.
Want more tips and inspiration?
Follow me on Instagram, Facebook, or LinkedIn for behind-the-scenes content, educational content, and design advice that actually helps.
Need a pro to handle your website?
Whether you're starting from scratch or need a refresh, I offer custom Squarespace design services to help your business stand out online. Get in touch here to book a free discovery call and see if we’re a good fit!
Or view my portfolio to see how I’ve helped others. :)
Frequently Asked Questions
-
By default, Squarespace allows you to display either a logo or a site title, but not both. However, you can show both by using a design workaround (combining them into one image) or adding custom CSS to place the site title next to your logo. Read the full blog post above to learn how!
-
When you upload a logo in Squarespace, the platform automatically hides the site title to avoid duplication. This is built into most Squarespace templates, especially in version 7.1. You’ll need to use a workaround or CSS to display both elements together.
-
To add custom CSS in Squarespace, go to Pages > Custom CSS, then paste your code into the editor. This lets you style elements like your site title, logo placement, and header layout for more control over your design.
-
It depends on your goals. Using an image is faster and easier, but the text won’t be readable by search engines. If SEO and accessibility are important to you, using CSS to keep the site title as text is the better option.
-
You can change the site title color using the Site Styles panel under Colors > Site Title – Header, or by using custom CSS for more precise control. Both methods let you match your title color to your branding.
