How to Create a Vertical Navigation in Squarespace 7.1

NOTE: A lot has changed since this video was recorded! If this code is no longer working for you, check out my Vertical Navigation Plugin! Unlike Blog Videos, this plugin is continually updated to align with any Squarespace Updates!!

Vertical Navigations can add interest to your website designs. In a previous video, I showed you how to create this feature in Squarespace 7.0.

In this video, I show you how to create a vertical navigation on your Squarespace 7.1 site using your current horizontal header navigation. To help your site be more mobile-friendly, I have put the code within a media query so that the code will only run when the screen is above a certain size. The code used in the video is provided below.

The following code is used in the video.

@media only screen and (min-width:991px) {   
  .page-section:first-of-type {     
    padding-top:0px !important;   
  }   
  .page-section {     
    margin-right: 100px;   
  }   
  #header {     
    width: 100px;     
    position: fixed;     
    height: 100vh;     
    z-index: 99999 !important;     
    display: table;     
    writing-mode: vertical-rl;    
    text-orientation: mixed;     
  }   
  .header .header-announcement-bar-wrapper {     
    padding: 10px 30px 10px 10px;   
  }   
  .header-inner{    
    height: 100vh;     
    display: table-cell;     
    vertical-align: middle;   
  } 
}

Rotate Text for Left Aligned Navigation

transform: rotate(-180deg);   

Add Spacing Between Navigation Links

.header-nav-item {
 margin-bottom: 5px;
}

Want some more Vertical Navigation options?

Check out our navigation and sidebar plugins!

Here are some other posts you may like:

• Edit The Mobile Banner Image On Squarespace 7.1

• Resize Images For Mobile In Squarespace 7.1

• Before/After Image Slider In Squarespace 7.1