Ghost Plugins

View Original

Floating Header Navigation (Preview Guide)


Super Plugin Info

  • Works with Squarespace 7.1

  • Requires Personal Plan or Higher

  • Uses CSS Editor

  • Compatible With All Header Layouts


Step 1. Header Settings

Edit the header and apply these settings.

  • Style: Solid

  • Desktop: Width - Full

  • Fixed: Basic

  • Layout: Any


Step 2. Add this code to Custom CSS

See this content in the original post

Step 3. Customizable Options

These options are available in Custom CSS.

  • Header Width

  • Header Padding

  • Header Border Radius

  • Header Top Spacing

  • Header Left or Center Alignment


Plugin Notes

  • Compatible with all header layouts.

  • Customize the header’s style with Squarespace settings.


Troubleshooting (Plugin Not Working)

  • The header must be set to Solid in its style settings.

  • If elements are going outside of the header, increase the @float-hdr-max-width option.