Vertical Navigation - Gradient Version

---

1. Plugin Info

Turn the navigation links into a gradient vertical navigation bar.

• Works with Squarespace 7.1

• Uses Custom CSS

---

2. Add this code to Custom CSS

// Vertical Navigation Gradient - Ghost //

@vertical-nav-height: 140vh;
@vertical-nav-padding: 25px;

@vertical-nav-bar-gradient: linear-gradient(to left, #4286f4, #373B44);
@vertical-nav-bar-gradient-webkit: -webkit-linear-gradient(to left, #4286f4, #373B44);

@vertical-nav-bar-color: #373B44; // fallback if user's browser doesn't support gradient

/* --- Do Not Edit Below ---- */

.header-nav-list{ background:@vertical-nav-bar-gradient-webkit;background:@vertical-nav-bar-gradient ;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 Gradient - Ghost //

---

3. Customizable Options

• Vertical Bar Height

• Inner Padding

• Gradient Background Color

• Gradient Background Color (Webkit)

• Solid Background Color (If User’s Browser Doesn’t Support Gradient)

---

4. Plugin 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 header button.

• If page content overlaps the vertical bar, adjust your site’s spacing margin.

---