How to Add Split Navigation in Squarespace 7.1
What’s a split navigation?
Split navigation refers to a type of menu where the items are shown on both sides of the site logo or title. By default on most 7.1 websites, the site logo is placed to the far left of the navigation menu. They mostly allow you to align the navigation side by side with the logo on the left, right, and bottom on the center, but no two-sided menu option on the left and right.
However, there's a way to change that, and we'll guide you through it!
How to add split navigation to Squarespace 7.1
Do you want to have split navigation on your Squarespace 7.1 site? You can achieve this with some straightforward code. Follow the step-by-step instructions and code provided below, or watch the video tutorial by Schwartz-Edmisten Web Design.
Step1:
Go to the Site Header and Title menu. In the Desktop display option, choose Header Layout, and select the option where the navigation is positioned below the logo. Afterward, click on Save.
Step2:
To implement split navigation, just copy the CSS code below. Then, go to 'Design,' and click on 'Custom CSS.' Paste the code there.
css:
/* 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;
}
This code will adjust the layout to achieve a split navigation effect on your website.
Step 3
In the code snippet, where you see ":nth-of-type(3)", change the number "3" to half of the total navigation items. For instance, if you have a total of 6 navigation items, change the number to "3" (3 on each side of the logo).
The "margin-left: -80px" allows you to control the spacing of the menu around your logo.
The "margin-right: 300px" allows for control of the size of the gap in the split navigation.
The "top: 30px" enables control over the top spacing of the menu.
If you find that your navigation items overlap on small screens, simply enclose the above code within these brackets below:
css:
@media screen and (min-width: 1000px) {
/* Your code here */
}
This ensures that these styling adjustments only apply when the screen width is at least 1000 pixels, preventing any issues on smaller screens.
Frequently Asked Questions (FAQ)
1. What is a split navigation in Squarespace?
This navigation style is a split style, with the logo in the middle and links split on either side. This layout is often used to achieve a more balanced and visually appealing header.
2. Is it possible to make split navigation in Squarespace 7.1 without any custom code?
Does Squarespace 7.1 have split navigation? But you can do this with a bit of CSS and a slight change to your markup.
3. Training on data up to October 2023 Will my split navigation be mobile-friendly?
Yes! This tutorial makes sure your split nav stays working and responsive. On mobile, the menu probably collapses into the standard mobile menu.
4. Does this method work for any Squarespace 7.1 template?
Yes, this method will work on all Squarespace 7.1 templates because the base structure is the same between all of them.
