Split Navigation in Squarespace 7.1

What does this code do?

This code snippet will allow you to create the look of a secondary navigation or split navigation in Squarespace 7.1 by placing your logo or site title in the centre with navigation items on each side.

Note: You do not need code to create a Secondary Navigation in Squarespace 7.0. You can do this in Site Styles.

Video Tutorial

Code Snippet

Copy and paste this code into Design > Custom CSS.

/*Secondary Navigation */
.header-display-desktop .header-title {
  height: 4vw !important;
  display: flex;
  align-items: center !important;
  justify-content: center;
}
.header-display-desktop .header-nav {
  position: absolute;
  top: 0;
  margin-top: 0 !important;
  height: 4vw !important;
  display: flex;
  align-items: center !important;
  justify-content: center;
}

.header-display-desktop .header-nav-item:nth-of-type(2) {
  margin-right: 50vw !important;
}

The code is set up to have two navigation items on each side of the site title or logo. This is done by adding spacing after the second navigation item “.header-nav-item:nth-of-type(2)”. If you do not have four navigation items, you can change the 2 to the navigation item you want the space after.

How To Use It

1. Copy and paste the code as indicated above.

2. Customize where you want the navigation to split as well as the spacing.