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

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

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

Previous
Previous

Product Accordion Block (Preview Guide)

Next
Next

Easy Video Lightbox (Preview)