Vertical Navigation | Squarespace 7.1

HeaderSidebarPlugins
Written By Rebecca Grace

What does this code do?

These code snippets will allow you to change the main header into a vertical navigation in Squarespace 7.1.

 

Video Tutorial

 
 
 

Set Up Your Header

The first thing you need to do is to set up your header.

  1. Under Colors turn off transparent and choose a theme.

  2. Make sure Fixed Position is turned off.

  3. Under the Desktop Tab, click on Header Layout and choose the 2nd layout option.

Code Snippets

Copy and paste the appropriate code into Design > Custom CSS

Navigation on the Left with Text Centered

/*VERTICAL HEADER */
@media only screen and (min-width: 1023px) {  

  /* Squarespace Editor */
  #page .page-section:first-of-type .sqs-section-wrapper {
    top: 0px !important;
  }
 .sqs-empty-section {
    top: 50px !important;
    padding-top: 0 !important;
  }
  
.sections  > *:not(.item-pagination) {
    width: 80%; /*Page Content Width*/
    float: right; /*Page Content Placement */
    padding-top: 0;
  }

  .item-pagination {
    width: 75%; /* Blog Page Pagination  Width*/
    float: right; /* Blog Page Pagination placement */

  }
  
.page-section:first-of-type  {     
padding-top: 0vw !important;   
}
  
.page-section:first-of-type .content-wrapper, .page-section:first-of-type .sqs-section-editing-ui {     
padding-top: 2vw !important;   
} 

.header {
  position: fixed;
  width: 20%; /*Header Width */
}
.header * {
  margin: 0px !important;
}
.header .header-announcement-bar-wrapper {     
  padding: 0px;
  height: 100vh;
} 
.header-display-desktop, .header-title-nav-wrapper, .header-nav-list {
  align-items: center; /*Horizontally Align Site Title, Navigation, and Button */
  flex-direction: column;
  text-align: center; 
}
  
.header-inner {
  align-items: flex-start; /* Vertically Align Header */
}

.header-nav {
   padding: 0 !important;
  }

.header-title {
  margin: 2vw !important; 
  width: 78% !important; 
}
  
.header-nav-list {
  margin: 2vw !important;
}
  
.header-nav-item a:hover{
 color: red !important; /* Navigation Links Color on Hover */
}
  
.header-actions--right {
  flex-direction: column; 
  align-items: center; /* Horizontally Align Cart and Social Icons */
  margin: 2vw !important; /* Spacing Above Social Icons */
}
.header-actions-action--social {
  flex-direction: row;
}
.header-actions-action--social .icon{
    padding: 4px; /* Spacing Between Social Icons */
  }
.header-actions-action--social .icon svg:hover{
   fill: red !important; /* Color of Social Icons on Hover */
  }
  .header-actions-action--cart {
    padding: 4px; /* Change this to match the spacing between the social icons */
    margin: 2vw 0 !important; /* Spacing Above and Below Cart Icon */
  }
  .header-actions-action--cart:hover {
    .icon--stroke svg, .icon-cart-quantity {
   stroke: red !important; /* color of cart on hover */
   color: red !important; /* color of cart quantity on hover */
  }
 }
  
/* Announcement Bar to Go Across the Whole Top */
.header .sqs-announcement-bar-dropzone {
    width: 100vw;
}
  
/* Folders */
.header-nav .header-nav-item--folder:hover .header-nav-folder-content  {
   position: relative !important;
   text-align: left !important; 
   left:0 !important;
   width: 100%;
  }
  
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: .5em 0em;
  background: red !important; /* Background color of folders */
}
  .header-nav-folder-item {
    text-align: center;
}
}
/* Widths for Screens Bigger than 2000px */
@media only screen and (min-width: 2000px) {
  .sections  > *:not(.item-pagination) {
    width: 90%;
  }
  .item-pagination {
    width: 85%;
  }
  .header {
  width: 10%;
}
}
/* End of Vertical Header */

Navigation on the Left with Text Left Aligned

/*VERTICAL HEADER */
@media only screen and (min-width: 1023px) {  
  
  /* Squarespace Editor */
  #page .page-section:first-of-type .sqs-section-wrapper {
    top: 0px !important;
  }
 .sqs-empty-section {
    top: 50px !important;
    padding-top: 0 !important;
  }
  
.sections  > *:not(.item-pagination) {
    width: 80%; /*Page Content Width*/
    float: right; /*Page Content Placement */
    padding-top: 0;
  }

  .item-pagination {
    width: 75%; /* Blog Page Pagination  Width*/
    float: right; /* Blog Page Pagination placement */

  }
  
.page-section:first-of-type  {     
padding-top: 0vw !important;   
}
  
.page-section:first-of-type .content-wrapper, .page-section:first-of-type .sqs-section-editing-ui {     
padding-top: 2vw !important;   
} 

.header {
  position: fixed;
  width: 20%; /*Header Width */
}
.header * {
  margin: 0px !important;
}
.header .header-announcement-bar-wrapper {     
  padding: 0px;
  height: 100vh;
} 
.header-display-desktop, .header-title-nav-wrapper, .header-nav-list {
  align-items: flex-start; /*Horizontally Align Site Title, Navigation, and Button */
  flex-direction: column;
  text-align: left; 
}
  
.header-inner {
  align-items: flex-start; /* Vertically Align Header */
}

.header-nav {
   padding: 0 !important;
  }

.header-title {
  margin: 2vw !important; 
  width: 78% !important; 
}
  
.header-nav-list {
  margin: 2vw !important;
}
  
.header-nav-item a:hover{
 color: red !important; /* Navigation Links Color on Hover */
}
  
.header-actions--right {
  flex-direction: column; 
  align-items: flex-start; /* Horizontally Align Cart and Social Icons */
  margin: 2vw !important; /* Spacing Above Social Icons */
}
.header-actions-action--social {
  flex-direction: row;
}
.header-actions-action--social .icon{
    padding: 4px; /* Spacing Between Social Icons */
  }
.header-actions-action--social .icon svg:hover{
   fill: red !important; /* Color of Social Icons on Hover */
  }
  .header-actions-action--cart {
    padding: 4px; /* Change this to match the spacing between the social icons */
    margin: 2vw 0 !important; /* Spacing Above and Below Cart Icon */
  }
  .header-actions-action--cart:hover {
    .icon--stroke svg, .icon-cart-quantity {
   stroke: red !important; /* color of cart on hover */
   color: red !important; /* color of cart quantity on hover */
  }
 }
  
/* Announcement Bar to Go Across the Whole Top */
.header .sqs-announcement-bar-dropzone {
    width: 100vw;
}
  
/* Folders */
.header-nav .header-nav-item--folder:hover .header-nav-folder-content  {
   position: relative !important;
   text-align: left !important; 
   left:0 !important;
   width: 100%;
  }
  
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: .5em 0em;
  background: red !important; /* Background color of folders */
}
}
/* Widths for Screens Bigger than 2000px */
@media only screen and (min-width: 2000px) {
  .sections  > *:not(.item-pagination) {
    width: 90%;
  }
  .item-pagination {
    width: 85%;
  }
  .header {
  width: 10%;
}
}
/* End of Vertical Header */

Navigation on the Right with Text Centered

/*VERTICAL HEADER */
@media only screen and (min-width: 1023px) {  

  /* Squarespace Editor */
  #page .page-section:first-of-type .sqs-section-wrapper {
    top: 0px !important;
  }
 .sqs-empty-section {
    top: 50px !important;
    padding-top: 0 !important;
  }
  
.sections  > *:not(.item-pagination) {
    width: 80%; /*Page Content Width*/
    float: left; /*Page Content Placement */
    padding-top: 0;
  }

  .item-pagination {
    width: 75%; /* Blog Page Pagination  Width*/
    float: left; /* Blog Page Pagination placement */

  }
  
.page-section:first-of-type  {     
padding-top: 0vw !important;   
}
  
.page-section:first-of-type .content-wrapper, .page-section:first-of-type .sqs-section-editing-ui {     
padding-top: 2vw !important;   
} 

.header {
  position: fixed;
  width: 20%; /*Header Width */
  left: 80%;
}
.header * {
  margin: 0px !important;
}
.header .header-announcement-bar-wrapper {     
  padding: 0px;
  height: 100vh;
} 
.header-display-desktop, .header-title-nav-wrapper, .header-nav-list {
  align-items: center; /*Horizontally Align Site Title, Navigation, and Button */
  flex-direction: column;
  text-align: center; 
}
  
.header-inner {
  align-items: flex-start; /* Vertically Align Header */
}

.header-nav {
   padding: 0 !important;
  }

.header-title {
  margin: 2vw !important; 
  width: 78% !important; 
}
  
.header-nav-list {
  margin: 2vw !important;
}
  
.header-nav-item a:hover{
 color: red !important; /* Navigation Links Color on Hover */
}
  
.header-actions--right {
  flex-direction: column; 
  align-items: center; /* Horizontally Align Cart and Social Icons */
  margin: 2vw !important; /* Spacing Above Social Icons */
}
.header-actions-action--social {
  flex-direction: row;
}
.header-actions-action--social .icon{
    padding: 4px; /* Spacing Between Social Icons */
  }
.header-actions-action--social .icon svg:hover{
   fill: red !important; /* Color of Social Icons on Hover */
  }
  .header-actions-action--cart {
    padding: 4px; /* Change this to match the spacing between the social icons */
    margin: 2vw 0 !important; /* Spacing Above and Below Cart Icon */
  }
  .header-actions-action--cart:hover {
    .icon--stroke svg, .icon-cart-quantity {
   stroke: red !important; /* color of cart on hover */
   color: red !important; /* color of cart quantity on hover */
  }
 }
  
/* Announcement Bar to Go Across the Whole Top */
.header .sqs-announcement-bar-dropzone {
    width: 100vw;
}
  
/* Folders */
.header-nav .header-nav-item--folder:hover .header-nav-folder-content  {
   position: relative !important;
   text-align: left !important; 
   left:0 !important;
   width: 100%;
  }
  
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: .5em 0em;
  background: red !important; /* Background color of folders */
}
  .header-nav-folder-item {
    text-align: center;
}
}
/* Widths for Screens Bigger than 2000px */
@media only screen and (min-width: 2000px) {
  .sections  > *:not(.item-pagination) {
    width: 90%;
  }
  .item-pagination {
    width: 85%;
  }
  .header {
  width: 10%;
}
}
/* End of Vertical Header */

Navigation on the Right with Text Right Aligned

/*VERTICAL HEADER */
@media only screen and (min-width: 1023px) {  
  
  /* Squarespace Editor */
  #page .page-section:first-of-type .sqs-section-wrapper {
    top: 0px !important;
  }
 .sqs-empty-section {
    top: 50px !important;
    padding-top: 0 !important;
  }
  
.sections  > *:not(.item-pagination) {
    width: 80%; /*Page Content Width*/
    float: left; /*Page Content Placement */
    padding-top: 0;
  }

  .item-pagination {
    width: 75%; /* Blog Page Pagination  Width*/
    float: left; /* Blog Page Pagination placement */

  }
  
.page-section:first-of-type  {     
padding-top: 0vw !important;   
}
  
.page-section:first-of-type .content-wrapper, .page-section:first-of-type .sqs-section-editing-ui {     
padding-top: 2vw !important;   
} 

.header {
  position: fixed;
  width: 20%; /*Header Width */
  left: 80%;
}
.header * {
  margin: 0px !important;
}
.header .header-announcement-bar-wrapper {     
  padding: 0px;
  height: 100vh;
} 
.header-display-desktop, .header-title-nav-wrapper, .header-nav-list {
  align-items: flex-end; /*Horizontally Align Site Title, Navigation, and Button */
  flex-direction: column;
  text-align: right; 
}
  
.header-inner {
  align-items: flex-start; /* Vertically Align Header */
}

.header-nav {
   padding: 0 !important;
  }

.header-title {
  margin: 2vw !important; /*Site Title Spacing */
  width: 78% !important; 
}
  
.header-nav-list {
  margin: 2vw !important; /*Navigation Links Spacing */
}
  
.header-nav-item a:hover{
 color: red !important; /* Navigation Links Color on Hover */
}
  
.header-actions--right {
  flex-direction: column; 
  align-items: flex-end; /* Horizontally Align Cart and Social Icons */
  margin: 2vw !important; /* Spacing Above Social Icons */
}
.header-actions-action--social {
  flex-direction: row;
}
.header-actions-action--social .icon{
    padding: 4px; /* Spacing Between Social Icons */
  }
.header-actions-action--social .icon svg:hover{
   fill: red !important; /* Color of Social Icons on Hover */
  }
  .header-actions-action--cart {
    padding: 4px; /* Change this to match the spacing between the social icons */
    margin: 2vw 0 !important; /* Spacing Above and Below Cart Icon */
  }
  .header-actions-action--cart:hover {
    .icon--stroke svg, .icon-cart-quantity {
   stroke: red !important; /* color of cart on hover */
   color: red !important; /* color of cart quantity on hover */
  }
 }
  
/* Announcement Bar to Go Across the Whole Top */
.header .sqs-announcement-bar-dropzone {
    width: 100vw;
}
  
/* Folders */
.header-nav .header-nav-item--folder:hover .header-nav-folder-content  {
   position: relative !important;
   text-align: left !important; 
   left:0 !important;
   width: 100%;
  }
  
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: .5em 0em;
  background: red !important; /* Background color of folders */
}
  .header-nav-folder-item {
    text-align: right;
}
}
/* Widths for Screens Bigger than 2000px */
@media only screen and (min-width: 2000px) {
  .sections  > *:not(.item-pagination) {
    width: 90%;
  }
  .item-pagination {
    width: 85%;
  }
  .header {
  width: 10%;
}
}
/* End of Vertical Header */
 

Bonus: Hide the Header Until the Page Loads

Does your header flicker?

You may come across a situation where the header loads horizontally and then bounces to the vertical navigation. Use this code to hide the Navigation until it is properly loaded.

Add the following code to Design > Custom CSS

#header
  {
  visibility: hidden;
  }

Then add the following code to Settings > Advanced > Code Injection > Footer

<!-- Header -->
<script>
    window.onload = function() {
      document.getElementById("header").style.visibility = "visible";
    }
</script>
<!-- End of Header -->
 

How To Use It

  1. Copy and paste the code snippet as indicated above.

  2. Edit the spacing and colours.

  3. To center the items vertically in the navigation change

.header-inner {   
  align-items: flex-start; 
}

to

.header-inner {   
  align-items: center; 
}

4. To put the social icons and cart at the bottom of the navigation, change

.header-inner {   
  align-items: flex-start; 
}

to

.header-inner {   
  align-items: stretch; 
}
Rebecca Grace

Rebecca Grace is a Squarespace CSS Expert and Website Designer.

https://rebeccagracedesigns.com
Previous

Breadcrumb Blog Navigation
Next

Custom Loading Screen