Secondary Navigation for Squarespace 7.1

The header layout with the logo centered and with primary and secondary navigation at either sides is perhaps the most popular header layout used in Squarespace 7.0 (Brine Templates). However, this option is no longer supported in Squarespace 7.1. Thankfully, we can create a workaround by using CSS and JavaScript to create primary & secondary navigation on the left and right of our centered logo.

Kindly watch the video below for a walkthrough.

Please refer to the codes below as mentioned in the video above.

Place the code below to the Footer Code Injection

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script type="text/javascript">
   $(function() {
   $(".header-display-desktop .header-nav-item:nth-child(n+3)") .prependTo (".header-actions--right");
});
</script>

Paste the code below toDesign > Custom CSS

.header-actions .header-nav-item {
  padding-right:2.1vw !important; /**change as needed**/

}

.header-nav-list   {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end !important;
      -ms-flex-pack:end !important;
          justify-content:flex-end !important;
  .header-nav-item {
     padding-right:2.1vw !important; /**change as needed**/
  }
}

.header-actions--right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
}

.header-actions .header-nav-item {
  padding-right:2.1vw !important;//change as needed

}

.header-nav-list   {
  display:flex;
  justify-content:flex-end !important;
  .header-nav-item {
     padding-right:2.1vw !important; //change as needed
  }
}

.header-actions--right {
  display:flex;
  justify-content:space-between;
}

.header-display-mobile .header-nav-item.header-nav-item--collection {
display:none;
}

If you are using Folders in your menu, you may need to add the code below to make sure folder content only shows up on hover

.header-nav-folder-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: auto;
   margin-left:-1em;
    padding: .5em 1em;
    text-align: left;
    width: 200px !important;
    z-index: 10;
}

 .header-nav-item--folder:hover .header-nav-folder-content, .header-nav-item--folder .header-nav-folder-content.focus-within {
    opacity: 1;
    pointer-events: auto;
}

---

Want to add stylish and unexpected features in your Squarespace site?

Easily Create this stylish vertical tab feature.