How to add split navigation to Squarespace 7.1
If you're aiming for a polished, professional look for your website, a split navigation layout might be exactly what you need. Split navigation places your logo in the center of your header, with navigation links aligned to the left and right. This style is popular with modern websites and fashion brands and offers a balanced visual design that draws attention to your branding.
In this post, we’ll walk through how to add split navigation to your Squarespace 7.1 site — no third-party plugins or advanced developer skills needed.
Table of Contents
Why Use Split Navigation?
Here are a few reasons why split navigation might be perfect for your site:
Visual Balance: Your logo is prominently displayed in the center.
Brand Focused: It reinforces your branding as the focal point.
User-Friendly: Navigation items are grouped and easily scannable.
Modern Aesthetic: This layout is trendy and often used by high-end brands.
Complexity: Easy
Step-by-Step Instructions
Step 1
Visit the Site Header and Title menu. In the Desktop display option, select the Header Layout and select the option with the navigation below the logo, then hit Save.
Step 2
Simply copy the css code below. Then head to ‘Design’, then ‘Custom CSS’ and paste the code.
/*Split navigation*/
.header-nav {
position: absolute;
top: 30px;
bottom: 0;
margin-top: 0!important;
margin-left: -80px!important;
}
.header-nav-item:nth-of-type(3) {
margin-right: 300px!important;
}
.header-title-logo a {
z-index: 1000;
position: relative;
}
Example ofhow the menu will look like.
Step 3
In the code snippet where you have
":nth-of-type(3)”, change “3” to half the total nav items. For example, with 6 nav items total, change that number to “3” (3 on each side of the logo).
"margin-left: -80px”, allows for the control of the spacing of the menu around your logo.
"margin-right: 300px”, allows for control of the size of the gap in the split navigation.
“top: 30px”, allows for control of the top spacing of the menu.
Lastly, you might find that your nav items overlap on small screens to correct this, simply place the above code within these brackets below.
@media screen and (min-width: 1000px){
}Key Takeaways
Split navigation centers your logo and splits links on either side for a sleek, symmetrical layout.
Though Squarespace 7.1 doesn’t support it by default, you can achieve it easily with page organization and simple custom CSS.
This design is perfect for modern, minimal brands looking to highlight their logo.
Always test your changes across devices to maintain usability.
FAQs
Can I do this without coding?
Not entirely. While the navigation order helps, custom CSS is needed to complete the split effect visually.
Will split navigation work on all templates in Squarespace 7.1?
Yes! All Squarespace 7.1 templates support custom CSS and header customization.
Will it affect mobile navigation?
No — Squarespace uses a mobile menu by default. Just ensure the CSS doesn't override mobile styling.
Can I use an image as the logo in the center?
Absolutely! Squarespace allows either text or image logos, and both work great with split navigation.
Conclusion
Split navigation can add a high-end, editorial vibe to your Squarespace website with just a few small tweaks. By placing your logo in the center and balancing navigation links on both sides, you create a more memorable and visually appealing header.
It’s an elegant way to stand out — and with Squarespace 7.1, it’s easier than ever to make it happen.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
