Slashy Navigation

Site Header
Written By The Ghost Co.
Learn more
Learn more

1. Plugin Info

Add a slash (or a different character) in between each link in the navigation.

  • Works with Squarespace 7.1

  • Uses Custom CSS

2. Add this code to Custom CSS

// Slashy Navigation - Ghost //

@slashy-character: " / ";
@slashy-color: #000;
@slashy-spacing: 10px;

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

.header-nav-item a:after { content: @slashy-character; margin-left: @slashy-spacing; color: @slashy-color; } .header-nav-item:last-child a:after { content: ""; } .header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item a:after { content: "" !important; } .header-nav-item--active a { background-image: none !important; }

// Slashy Navigation - Ghost //

3. Customizable Options

  • Change Slash

  • Color

  • Spacing

The slash inherits its font style from Squarespace navigation font settings.

4. Plugin Notes

  • Does not apply to folders or mobile navigation.

The Ghost Co. http://www.ghostplugins.com
Previous

Header Button - Solid Drop Shadow Style
Next

Rotating Header Logo