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.
