How to Make a Split Navigation in Squarespace 7.1 website
What’s a split navigation?
Split navigation is when the menu items on a website are shown on both sides of the site logo or title. On most 7.1 websites, the default setup has the site logo on the far left within the navigation menu. You can usually choose to position the navigation on the left, right, or centered below the logo, but there isn't an option to split the menu into two parts on either side of the logo.
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.
