How to Make a Split Navigation in Squarespace 7.1

Mar 2

UPDATE! - We have updated this blog post to reflect recent changes to Squarespace’s header functionality.

We initially created this blog post back in 2020 shortly after Squarespace released version 7.1 when we discovered that it was missing a design element that was a favorite of ours in the 7.0 version - split navigation. Due to some recent changes in Squarespace, the custom CSS that we had provided in the original version of this post no longer works properly.

We found the issues with our original code when we were looking to add a split navigation to our own new website (see above). We then reached out to Chris Schwartz-Edmisten over at Schwartz-Edmisten Web Design to see if he could help us solve the issues presented with the old code. Chris was able to find a solution and we have included the JavaScript and CSS needed, as well as his video and instructions on how to modify the CSS to fit your specific needs.

(Chris is a wizard with CSS and is great to work with! You can reach out to him for personalized assistance with your website here)

We do wish that Squarespace had stuck with a split navigation header option when they released 7.1. However, with the help of Chris Schwartz-Edmisten, we found a code workaround to help us achieve the look!

What is split navigation?

Split navigation is when your navigation menu items are displayed on either side of your site logo or title. Most 7.1 websites by default display the site logo to the far left of the page within the navigation menu. There are a few different options for navigation positioning—left, right, or centered below the logo—but none that split up the menu into two chunks on either side of the logo.

Keep reading for a way to change that!

How to add split navigation to Squarespace 7.1

So you want to add split navigation to your Squarespace 7.1 site? With some simple code, this look is now possible. Follow along with Schwartz-Edmisten Web Design’s video or use the 4-step instructions with code below:

*Please note - if you are having issues with the code, please be sure to check out Schwartz-Edmisten Web Design’s original post here, as he will update the code as needed.

Step-By-Step:

Step 1. Visit the Site Header and Title menu.

Step 2. Within the Desktop display option, select the Header Layout and select the option with the navigation below the logo. Hit Save.

Step 3. Go to Settings > Advanced > Code Injection and add the following to the Footer section:

<!-- Split Nav Code schwartz-edmisten.com -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const headerTitleNavWrapper = document.querySelector(".header-layout-branding-center-nav-center .header-title-nav-wrapper");const headerNav = document.querySelector(".header-layout-branding-center-nav-center .header-nav");const clonedHeaderNav = headerNav.cloneNode(true); headerTitleNavWrapper.prepend(clonedHeaderNav);setTimeout(function(){ headerTitleNavWrapper.classList.add('has-nav'); }, 200);
if(window.location == window.parent.location){var folderTitleElements = document.querySelectorAll('.header-nav-folder-title');folderTitleElements.forEach(function(folderTitleElement){folderTitleElement.addEventListener('click', function(event) {event.preventDefault();var parentContainer = folderTitleElement.closest('.header-nav-item--folder');var firstChildLink = parentContainer.querySelector('.header-nav-folder-item:first-child > a');var targetUrl = firstChildLink.getAttribute('href');window.location.href = targetUrl;});});}});
</script>
<!-- end Split Nav Code schwartz-edmisten.com -->

Step 4. Go to Design > Custom CSS and add the following CSS:

/*
===================================
    SPLIT NAVIGATION STYLING
===================================
*/
@splitAfterItem: 3;
@actionSize: 350px; 
@logoSpacing: 2vw;

//Width at which nav will stack
@media screen and (min-width:1200px) {
  
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(8px,calc(~".6vw + 5px"),18px);
}

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  }
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  }
  &.has-nav .header-nav-item a{opacity:1!important;}
.header-title{grid-column-start:2;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
  }
}
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
.header-nav-list{justify-content:flex-start;}
}}}
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  } 
.header-actions{
  width:@actionSize;
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  }
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;
}
}
/*
===================================
    end SPLIT NAVIGATION STYLING
===================================
*/

Important notes:

Each website will be different in terms of the number of navigation items, whether there are social icons, a button or a cart icon in the header, etc. The descriptions of variables included in the CSS below will help you to customize the CSS provided above to fit your website.

splitAfterItem – This variable determines when the split in the navigation occurs. If you have six items like we do on our website, you will want to leave the number at 3. If you have four total items, you will want the split to occur after the second so you would change the number to 2.
actionSize – This variable determines the size of the container around the action items (button, cart, etc.) to the right of your nav items. Feel free to play around with the pixel count here to make sure that your action items appear how you would like.
logoSpacing – this variable dictates the spacing between the logo and the nav items.

What this does is tells your internet browser “Hey! Only use this CSS on screens bigger than 1000px, got it?” On smaller screens, it will use the standard Squarespace responsive display.

That’s it!

Congrats! You should now have a split navigation displayed throughout your website!

Have you added a split navigation to your own website? Run into any issues getting yours setup? Be sure to let us know in the comments below!

Station Seven