Ghost Plugins

View Original

Slide Out Menu - v2.0 (Preview Guide)


Super Plugin Info

  • Works with Squarespace 7.1

  • Requires Business Plan or Higher

  • Uses CSS Editor and Code Injection


Step 1. Header Settings

Edit the desktop header and set the desktop header layout to logo on left / nav on right. This header layout is required for the plugin to work.


Step 2. Add this code to Header Code Injection

See this content in the original post

Step 3. Add this code to Footer Code Injection

See this content in the original post

Step 4. Add this code to Custom CSS

See this content in the original post

Step 5. Customizable Options

These options are available in Custom CSS.

  • Open Menu Width (Desktop and Mobile)

  • Open Menu Content Width

  • Overlay Color (When Menu Is Open)

  • Menu Hamburger Icon Spacing

  • Menu Hamburger Icon Placement (Left or Right)

  • Link Size and Spacing


Helpful Tip - Menu Colors, Alignment, Etc.

This plugin is simply showing Squarespace’s mobile menu in the slide out, so native styles for the mobile menu will apply and can be adjusted like normal.

  • Site Styles: Colors and Fonts

  • Edit Header (Mobile): Open Menu Alignment and Icon Style

If you want to move the = icon to left or right, use the @menu-icon-left-or-right option in CSS.


Plugin Notes

  • Slide out direction and duration cannot be changed.

  • Keep the desktop header layout set to logo on left / nav on right.

  • Other styles like fonts and colors can be changed like normal.