Vertical Navigation (Updated 7.1 Version)

---

Description

Turn the navigation links into a left aligned vertical navigation bar. This plugin uses css editor and works with Squarespace 7.1.

---

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Vertical Navigation //

.header-nav-list {
  width: 135vh !important;
  padding: 25px;
  background: #000000;
  position: fixed;
  -webkit-transform:rotate(-90deg)translateX(-85%);
  -webkit-transform-origin: top left;
  left: 0px;
  top: 0px;
  text-align: center;
  z-index: 999;
}

---

Customize

Depending on how many links are in navigation, you may need to modify the width value to properly center the links.

You can also adjust the padding and background color values to your liking.

Header layout must be set at Logo - Navigation (Middle) - Call To Action. It is recommended to keep links shorter and as single links – no folders.

Vertical navigation only applies to desktop and does not target social icons, cart icon, or header button.

---