PillNav: Floating Pill Navigation

PillNav from SQS Mods replaces the standard Squarespace header with a compact floating pill that opens into a full menu. It builds that pill from the header you already have: navigation links, folders, logo, primary button, cart with its live count and social icons are cloned live, so renaming or reordering pages in Squarespace updates the pill on the next load and there is no second menu to maintain.

What you can control

A visual configurator sets everything without code: left, centre or right alignment, offset from the top, open width (with a separate mobile width), corner radius from capsule to rounded rectangle, colours, shadow and the toggle button. Larger menus can be organised into headed columns, folders become click-to-expand sub-menus, and optional extras include a frosted liquid glass effect, a dimmed backdrop behind the open menu, scroll-spy for one-page sites and four scroll behaviours.

Who it suits

Portfolio, studio, architecture and hospitality sites with strong imagery where a full-width header feels heavy, and designers who want a distinctive navigation without building one from scratch.

One honest caveat

Your header's Navigation Design colour must be set to Adaptive before installing, because that is the mode PillNav reads. It is Squarespace 7.1 only and needs Code Injection, so a Core plan or higher. A floating pill is a strong design statement, so check the live demo against your own site before committing.

Installation

Style it in the configurator, copy the config and paste two blocks into your site. It is a one-time purchase with free updates, and the engine is lightweight, keyboard accessible and respects reduced-motion settings.