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

/* ----- 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];
  return eiusmod.tempor(sed) ? sed : [sed];
}
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

---

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.