SQSMODS · Squarespace 7.1 Plugin
Your navigation,
reimagined.
Give your Squarespace site a sleek floating pill navigation — built automatically from the menu you already have. Styled in minutes to match your brand, it gives your whole site a polished, custom‑designed feel.
One-time purchase · Free updates · Works on any Squarespace 7.1 site on a Core plan or higher
Built from your header
Links, folders, logo, cart, and socials are cloned live from your real Squarespace nav.
Visual, no-code setup
Shape, color, motion, and effects — all set in a live configurator. Paste two blocks, done.
Yours to style
Alignment, radius, colors, multi-column menus, liquid glass, backdrop, and more.
Fast & accessible
Tiny dependency-free engine, keyboard-ready, reduced-motion aware, and SEO-safe.
Reads Your Squarespace Header
It mirrors your existing navigation automatically.
PillNav clones your real Squarespace header — nav links, folders, your logo, buttons, cart, and social icons — then hides the native header and renders a floating pill in its place. Rename, reorder, or add items in Squarespace and the pill updates on the next load. There's no second menu to maintain.
01 — Position & Size
Place the pill exactly where you want it.
01.1
Horizontal alignment
Pin the floating pill to the left, center (default), or right of the viewport. It stays fixed at the top of every page as visitors scroll, always in the same spot.
Left
Center
Right
01.2
Offset from top
The gap in pixels between the top of the viewport and the pill. Nudge it down for breathing room or up to sit tight against the edge.
01.3
Open width
How wide the menu expands when opened. Use a fixed length like
30vw or 480px, or auto to grow and fit its content — best when you have multiple columns.01.4
Separate mobile width
A dedicated open width for phones (90vw by default), with a configurable breakpoint. The pill feels right on desktop and never looks cramped on mobile.
02 — The Pill
Shape it to match your brand.
02.1
Corner radius
One value drives the whole shape. A large radius reads as a capsule when closed and a soft rounded rectangle when open; a smaller radius (≤28) keeps a consistent rounded shape in both states. Square, rounded, or full pill. it's your call.
Capsule
Rounded
02.2
Background & shadow
Set any pill background color and any CSS box-shadow. A soft drop shadow floats the pill above your content; flatten it for a minimal look.
02.3
Logo — inherited
Your Squarespace logo (image or text) is cloned into the pill and inherits your Site Styles Logo Height automatically. Leave it on
auto to match your header exactly, or set a fixed pixel value.02.4
Stacking & spacing
Fine-tune the internal bar padding and the gap between logo and toggle, plus the z-index so the pill always sits above your content and popups.
03 — Toggle Button
The open / close button, your way.
03.1
Color, size & shape
Set the button color, icon color, size, and radius. Make the radius half the size for a perfect circle, or square it off. The open (✕) and closed (☰) states share the same styling for a clean, predictable control.
03.2
Icon scale
Control how large the menu icon sits inside the button. A single value keeps the hamburger perfectly centered at any button size.
03.3
Uses your burger icon
If your Squarespace header has a custom menu-icon style, PillNav clones it. Otherwise it renders a crisp built-in hamburger that morphs to an ✕ on open.
04 — Menu & Columns
A full navigation menu, built from your header.
04.1
Everything is cloned
Links, folders, your logo, the cart with its live count, your primary button, and social icons are all pulled from your real header. The current page even gets a subtle accent dot, so visitors always know where they are.
04.2
Multi-column menus
Organize a larger menu into multiple headed columns — group related links, resources, and legal pages so nothing feels crowded. Each column carries its own heading, and you can add as many as you need.
04.3
Expandable folder sub-menus
Drop a Squarespace folder into a column and it becomes a clean click-to-expand sub-menu with a smooth height animation — no cramped nested lists.
04.4
Folder icon alignment
Place the folder's dropdown icon right beside its label, or push it to the far edge of the row. Two looks, one setting.
04.5
Social icons
Your header socials are collected into their own group. Lay them out in a wrapping row or a neat stacked column, and set their size in pixels.
04.6
Column headings
Every column carries its own heading, and the socials group heading is yours to name or translate — so each part of the menu is clearly labelled in your own words.
05 — Colors
Accent and menu tones.
05.1
Accent color
One accent drives your call-to-action link, the current-page dot, and the keyboard focus rings — so the whole pill feels like one coherent, on-brand control.
Accent
Text
Muted
Divider
05.2
Menu chrome
Independently set the menu text color, the muted tone used for column headings, and the divider line — so the panel matches whether your site runs light or dark.
05.3
Inherited link styling
Because the nav is cloned from your header, links keep your Squarespace fonts and sizing. PillNav only strips the native hover underline so the panel stays clean.
06 — Motion & Accessibility
Smooth to use, and open to everyone.
06.1
Open & expand animation
The pill glides open to its full width, and folder sub-menus unfold with a matched, buttery height animation. Set the duration and easing to taste.
06.2
Entrance animation
A gentle fade and drop-in when the page loads gives the pill a polished first impression. Adjust the drop distance, or switch it off entirely.
06.3
Built for accessibility
Respects the visitor's "Reduce Motion" setting, closes on Escape or a click outside, auto-closes when a link is tapped, marks the current page, and draws keyboard focus rings — all wrapped in a proper navigation landmark.
Reduce Motion
Esc to close
Click-away close
Current-page dot
Focus rings
Auto-close on link
07 — Effects
Premium touches, all optional.
07.1
Liquid Glass
Turn the pill frosted and translucent, with a soft top sheen and a light rim — Apple-style "liquid glass" that looks stunning floating over photography. Tune the tint, blur, and saturation, or leave it off for a solid pill.
07.2
Backdrop
Dim and blur the page behind the open menu so the pill takes focus — especially over busy, full-bleed imagery. Tapping the dimmed area closes the menu. Set the scrim color and blur, or disable it.
07.3
Scroll-spy
On one-page sites, the current-page dot follows whichever
#section is in view as visitors scroll — a live, self-updating table of contents built into your nav.08 — Scroll & Advanced
How it behaves as visitors scroll.
08.1
Scroll behavior
Auto mirrors your native header. Reveal hides the pill on scroll-down and brings it back on scroll-up. Mirror-native follows the header exactly, and Static keeps it perfectly still.
08.2
Visual configurator
Every option above is set with a live visual configurator. No code to touch. Adjust, watch the config update in real time, click Copy, and paste.
FAQ
Questions we get asked a lot.
Just one thing: your header's Navigation Design colour must be set to Adaptive. PillNav reads your live navigation to build the pill, and Adaptive is the mode it's designed to read — so your links always take the right colour over every section. Beyond that it's all yours: Full or Inset width, Fixed position on or off — PillNav adapts to whatever you choose.
Yes. PillNav is built for Squarespace 7.1 and reads your existing header — nav, folders, logo, socials, cart, and button — so it fits any template. It measures your real header's styles rather than guessing, so there's no custom CSS to write. The one prerequisite is setting your header's Navigation colour to Adaptive (see the first question above).
The Squarespace Core plan or higher. PillNav installs through site-wide Code Injection, which Squarespace only unlocks on Core and above — so it won't run on the entry-level plan. If you can open Settings → Advanced → Code Injection, you're all set.
No. The engine is tiny, dependency-free vanilla JavaScript, minified and served from a global CDN. It runs once on load to build the pill and adds no ongoing overhead.
Yes. Squarespace folders are cloned and rendered as clean click-to-expand sub-menus with a smooth height animation. Their dropdown icons come from your header, and you choose whether they sit beside the label or at the far edge.
Both are automatic. Your logo (image or text) is cloned into the pill and inherits your Site Styles Logo Height. Any social icons in your header settings are collected into their own group inside the open menu. Nothing to re-upload.
Yes — the open menu can be organized into multiple headed columns, each with its own label, so larger navigations stay tidy and easy to scan. It's quick to set up with no code, and you can add as many columns as you need. Step-by-step instructions are included in the setup guide.
No. A visual configurator handles all the setup. Choose your options, watch the config update live, click Copy, and paste two blocks into your Squarespace Header code injection. To change anything later, open the configurator and repeat.
Yes. PillNav reads your header on every page load, so renaming, reordering, or adding nav items, folders, or socials in Squarespace shows up automatically on the next load. Only the styling lives in your config — the content is always live.
That's intentional. Inside the Squarespace editor, PillNav steps aside so you can edit your real header and pages normally. Switch to your live site or Preview to see the floating pill.
Yes. The pill is a proper navigation landmark with ARIA state on the toggle. It closes on Escape and click-away, respects the OS "Reduce Motion" setting, marks the current page, and shows keyboard focus rings for tab users.
No. The pill's links are real anchor tags pointing at your real pages, and your Squarespace pages, URLs, and metadata are unchanged. The native header is only visually hidden, not removed, so search engines still crawl your navigation normally.