Vertical Navigation - Site Header
Plugin Details
Turn the navigation links into a left-aligned vertical navigation bar.
Compatibility
Works with Squarespace 7.1
Uses Custom CSS
Add to Custom CSS
// VERTICAL NAVIGATION LINKS - GHOSTPLUGINS.COM // @vertical-nav-height: 140vh; @vertical-nav-padding: 20px; @vertical-nav-bar-color: #000; /* --- Do Not Edit Below ---- */ .header-nav-list{width:@vertical-nav-height!important;padding:@vertical-nav-padding;background-color:@vertical-nav-bar-color;position:fixed;-webkit-transform:rotate(-90deg) translateX(-85%);-webkit-transform-origin:top left;left:0;top:0;text-align:center;z-index:999} // VERTICAL NAVIGATION LINKS - GHOSTPLUGINS.COM //
Customizable Options
Vertical Bar Height
Inner Padding
Background Color
Notes
Header layout must be set at Logo - Navigation (Middle) - Call To Action.
It’s recommended to keep links shorter and as single links - no folders.
Vertical nav only applies to desktop and does not move social icons, cart, or button.
If page content overlaps the bar, adjust your site’s spacing margin.