Ghost Plugins

View Original

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

See this content in the original post

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.