How to Display Logo Left and Site Title Right in Squarespace 7.1
Positioning your logo and site title correctly is critical for branding. Squarespace 7.1 doesn’t offer built-in flexibility to change header alignment completely. However, with custom CSS and layout logic, you can achieve full control.
Can You Customize Header Layout in Squarespace 7.1?
Yes, at least to some extent, by default values. Full control requires CSS.
With Squarespace 7.1, you can center or stack the logo and the title, but you can't align them side by side in your order. You’ll need some custom CSS for the left logo and right-aligned site title.
Default Logo and Site Title Position in Squarespace Explained
By default:
Squarespace, on the other hand, either places the logo and title in a stack or centers them.
A core template, such as Brine and Rall, doesn’t have a natural flow for a logo-left, title-right design.
Cartridge header styles are Centre, Line left, and Line center.
The default CSS containers are built with Flexbox, and customization is limited through site settings
How to Move the Site Title to the Right Using Custom CSS
You can reposition elements using targeted CSS and Flexbox.
Example CSS:
.header-title-logo a{
display: flex;
justify-content: space-between;
align-items: center;
}
.header-title-logo a::after {
content: "Site Title";
font-size: 24px;
color: black;
text-align: center;
}
.header-title-nav-wrapper{
flex: 0 0 100% !important;
}
.header-nav{
margin-top: -3% !important;
flex: 0 0 80% !important;
}
This layout:
Position the logo to the left
Pushes the site title to the right
Keeps both horizontally aligned
Step-by-Step: Display Logo on Left and Title on Right
Follow this method to apply changes:
Go to Website > Design > Custom CSS
Paste the above Flexbox CSS code
Open the site in preview mode
Check class names using browser DevTools
Adjust class names if your theme uses variations
Always verify with multiple browsers.
Adding Flexbox or Grid Styles to Adjust Header Alignment
Flexbox is preferred for dynamic alignment. Grid can also work.
Flexbox example:
.header-layout {
display: flex;
justify-content: space-between;
align-items: center;
}
CSS Grid example:
.header-layout {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
Responsive Styling: Ensuring Mobile Compatibility
Responsive CSS ensures headers adapt on small screens.
Use media queries:
@media screen and (max-width: 768px) {
.header-branding {
flex-direction: column;
align-items: center;
}
.site-title {
margin-left: 0;
margin-top: 10px;
}
}
This layout stacks the logo and title on mobile for better readability.
Fixing Spacing and Alignment Issues in Custom Headers
Misaligned elements often result from padding or default margins.
Fixes include:
✓ Remove default padding:
.header-branding {
padding: 0 ! important;
}
✓ Align vertically:
.header-branding {
align-items: center;
}
✓ Tweak margins for spacing consistency:
.site-title {
margin-left: 20px;
}
Check computed styles in browser tools.
Using Developer Tools to Target Header Elements
DevTools help determine the real class names your Squarespace template is using.
Steps:
Open Chrome or Firefox
Right-click header > Inspect
Telling the logo & title apart. Find what constitutes the logo and the title
Note class names
Use exact selectors in CSS
Example inspection result:
Logo class: . header-title-logo
Title class: . header-title-text
Develop with more specific selectors to avoid collisions in CSS.
Alternative Method: Utilize a Header Image Containing Logo and Title Text in One Image.
Design your custom text and logo image.
Steps:
Make the logo + title as one PNG or SVG
Below the site title & logo upload
Disable the site title text in Design > Site Styles
Positioning it in the correct place with CSS
Pros:
Full design control
No need for custom CSS
Cons:
No SEO(Printable Title Not Available)
Final Thoughts for Balanced, Branded Header Design
Use these final practices:
Preserve your SEO by creating alt text for logo images
Check mobile view frequently
Opt for a header height of < 100px for UX.
Don’t let the header get lost in a sea of white
Keep them all in the same type for branding consistency.
Frequently Asked Questions (FAQ)
1. Can I display both my logo and site title in the Squarespace 7.1 header?
By default in 7.1, uploading a logo replaces the site title. To show them both, use a custom CSS snippet that adds the title next to (or before) your logo. For example:
.header-title-logo::after { content: "My Site Name" !important; font-size: 24px !important; vertical-align: middle !important; padding-left: 30px !important; } .header-title-logo a { vertical-align: middle !important; }
You can also switch ::after to ::before to position the text before the logo youtube.com.comstnsvn.com+6bycrawford.com+6sqspthemes.com+6.
2. Where do I add this CSS in Squarespace?
Navigate to Design → Custom CSS in your Squarespace dashboard and paste the code there. Then click Save to apply the changes site-wide sqspthemes.com+3applet. studio+3stnsvn.com+3.
3. How can I ensure the logo and title stay aligned nicely?
Adjust CSS properties such as vertical-align, padding, font-size, etc. For pixel-perfect alignment, tweak values like padding and font size until both elements visually balance.
4. What if I want my navigation links split around the logo?
You can use custom JavaScript + CSS for split navigation (links on both sides of the logo/title) using instructions similar to those in this blog from Station Seven stnsvn.com. This involves:
Choosing a header layout with a centered logo/navigation.
Injecting custom JS in Settings → Advanced → Code Injection (Footer).
Adding accompanying CSS in Custom CSS.
Want a professional Squarespace website that will boost Your Business?
Contact Squareko – We build custom, secure Squarespace sites for creatives and businesses.
