How to add split navigation to Squarespace 7.1

This tutorial will show you how to add a split navigation to Squarespace 7.1. Split navigation is when your navigation menu items are displayed on either side of your site logo or title, in the current incarnation of Squarespace 7.1, this option is not available.

Complexity: Easy

---

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 below, Then head to to ‘Design’ and 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){ 
  
}

---

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, express 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.