Ghost Plugins

View Original

Drop Down Menu (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

  • Menu Hamburger Icon Spacing

  • Menu Hamburger Icon Placement (Left or Right)

  • Link Size and Spacing

  • Link Text and Outline Color (On Hover Style)

  • Social Icons Spacing (Open Menu)


Helpful Tip - Menu Colors, Alignment, Etc.

This plugin is simply showing Squarespace’s mobile menu in the drop down, 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

  • Down down 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.