Ghost Plugins

View Original

Easy Header Navigation Icons (Preview Guide)


Super Plugin Info

  • Works with Squarespace 7.1

  • Requires Personal Plan or Higher

  • Uses CSS Editor

  • Only Compatible On Desktop

  • Compatible With All Desktop Header Layouts


Step 1. Add this code to Custom CSS

See this content in the original post

Step 2. Customizable Options

These options are available in Custom CSS.

  • Your Own Icons (Up To 6)

  • Icon Size

  • Icon Spacing


Step 3. Upload + Assign Your Icons

Upload your icons to Custom CSS > Manage Files. It’s recommended that your icons are:

  • PNG Format

  • Same Aspect Ratio (1:1 is best fit)

After Uploading: Click the icon file to generate a URL link that can replace FILE-URL-HERE in the Custom CSS option. Show me this step


Plugin Notes

  • Compatible with all header layouts

  • Only applies to header navigation on desktop (does not apply to mobile menu)

  • Link spacing can be adjusted in Squarespace settings like normal


Troubleshooting (Plugin Not Working)

  • If your icons are not showing, ensure you are uploading them in PNG format

  • If the links line break, adjust the header’s width in Squarespace settings