3 Ways to Combine a Logo and Text in Your Squarespace Header
Welcome, Squarespace designers! In this blog post, I'll guide you through 3 distinct methods to effectively combine a logo and text in your Squarespace 7.1 site header.
Whether you're just starting out or looking to refine your header design, these tips will help you create a strong look for your site.
Option Zero: Use a Site Title Instead of a Logo
Sometimes less is more. If your logo is complex or doesn't display well at smaller sizes, consider using just the site title instead. This approach allows you to use Squarespace's adaptive header style to its fullest extent, dynamically adjusting text color to complement the background of each page section.
This Squarespace template for restaurants uses a simple text site title.
You can style your site’s title text through the site styles options in your Squarespace editor. You have control over font, size, and color.
For more guidance on leveraging site titles effectively, check out my post on why you don't always need a logo to get started.
Option 1: Combine Logo and Text in a Single Image File
Probably the most common approach is uploading your logo and text as a single image file.
How to upload a logo image to your site header
Like many Squarespace sites, this one uses an image file that includes the logo and wordmark.
Best Practices
Keep your image height reasonable and margins sensible to avoid a massive header.
Check your site in mobile view to ensure it looks good there too.
Use a transparent PNG that’s no larger than it needs to be, and compress it using TinyPNG or a similar app for better performance.
Option 2: Paste or Inject A Character Before Your Site Title Text
A creative approach involves injecting a Unicode text character before your site title text using custom code. This technique only makes sense, however, if your logo is basically a Unicode character.
This Squarespace template for videographers uses a dot injected before the site title.
Step-by-Step
1. Find a Unicode symbol to use as your logo. My favorite site for grabbing Unicode symbols is SYMBL.
2. Then you can either
Paste the symbol in with your Site Title (it will be the same color and size as your Site Title; there’s no custom code needed for this option), OR
Inject the custom code below that will insert and style the symbol to appear before your logo. You can then customize color, font size, et cetera.
// Character Before Logo -- strongsites.co //
.header-title-text a:before{
position:relative;
content:"â—‰"!important;
color: #8D1515;
@media screen and (max-width:767px){
bottom:-4px!important;
font-size:33px;}
bottom:-3px!important;
font-size:35px;
line-height:0!important;
padding-right:8px!important;}This technique can add a unique flair to your site header without impacting its flexibility or readability.
Option 3: Inject Text After Your Site Logo
The final method involves injecting text after your site logo using custom CSS. This allows you to creatively place your site name or tagline alongside your logo image.
My site uses Custom CSS to inject and style text after the logo.
How To Implement
Upload your logo image like usual, then
Add the custom code below to your Custom CSS to add text after it.
Replace the text with your own, and adjust the styling to align text with the logo, controlling vertical alignment, font, and spacing.
// Add text after logo -- strongsites.co //
.header-title-logo a:after {
content: "Strong Sites";
display: inline-block;
font-size: 1.3rem;
font-family: var(--heading), sans-serif;
text-align: center;
vertical-align: middle;
font-weight:600;
letter-spacing: .01px;
padding-left: 10px;
}
@media screen and (max-width: 640px) {
.header-title-logo a:after {
font-size: 1.2rem;
}
}
.header-title-logo img {
vertical-align: middle;
border-radius: 0px !important
}
.header-title-logo a {
display: flex;
align-items: center;
}Side Quest: If you want to use the Adaptive header style, you can add the following custom code snippet to the Page Header Injection invert the logo color on individual pages (works best on greyscale image files).
// Invert logo on a single page -- strongsites.co //
<style>
header#header img {
filter: invert(1);
-webkit-filter: invert(1);
}
</style>Have Fun!
Choosing the right way to display your logo and text in a Squarespace header is key to achieving a professional look across all devices and backgrounds. Experiment with these methods to find what works best for your website’s header.
Happy designing!
