Easy Vertical Navigation (7.0 Version)

Mar 1

Written By Ghost

Featured

Aug 10, 2019

The Ghost Team

Aug 10, 2019

Submitted This Plugin

Aug 10, 2019

Description

Turn the primary navigation links into a vertical navigation bar. This plugin uses css editor and works with Squarespace 7.0 (Brine Template Family).

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 Primary Navigation //

.Header-nav--primary {
  width: 135vh !important;
  padding: 30px !important;
  background: #22232A !important;
  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 primary 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.

It is recommended to keep links shorter and as single links – no folders.

Vertical navigation does not target social icons, cart icon, or header button. It is also best used on desktop devices. It’s recommended that you change the mobile breakpoint in site styles to 1050px. This will force mobile navigation to show on tablet screen size.

Featured