$39.00
Fit check
Great for
Squarespace 7.1 site owners
Designers polishing client site headers
Brands wanting a more premium navigation look
Anyone who wants styling upgrades without a mega menu setup
Know before you buy
- Compatible with Squarespace 7.1 only
- This is a styling kit, not a mega menu plugin
- Some styles require Code Injection, others use Custom CSS only
- Mobile folders keep the native Squarespace behaviour, they do not become accordions
- Small spacing tweaks may be needed depending on your logo and header settings
Version7.1
SetupEasy
Overview
Give your Squarespace navigation a more polished, custom look without rebuilding your header. The Squarespace Navigation Upgrade Kit from The Square Genius styles your existing desktop and mobile menus with soft pill shaped designs, elevated dropdowns, a rounded full header bar, a mobile menu overlay card and eye catching navigation badges.
It works with your current Squarespace 7.1 navigation using copy and paste CSS and small Code Injection snippets, so there is no complicated rebuild and no mega menu setup. Use the styles individually or combine them, and adjust colours, spacing, shadows and hover effects to match your brand.
The Squarespace Navigation Upgrade Kit, developed by The Square Genius, is a flexible styling kit for anyone whose Squarespace header feels a little too standard. Rather than rebuilding your navigation or setting up a complex mega menu, it works with your existing Squarespace 7.1 menu and layers on a set of polished design upgrades using copy and paste CSS and small Code Injection snippets.
On desktop, you can turn your standard navigation links into a soft pill shaped menu, or go further with a fully rounded header bar for a floating look. Each style includes clearly labelled settings for background colour, border radius, spacing, shadow, borders and hover effects, so matching the kit to your brand takes minutes rather than hours.
Dropdown menus get the same treatment. The kit upgrades standard Squarespace dropdowns with rounded corners, cleaner spacing, soft shadows and smoother hover effects, with an optional frosted glass blur for a more premium feel. This is especially useful on sites with multiple services, resources or shop categories where dropdowns do a lot of work.
Navigation badges are one of the most practical inclusions. You can add small labels such as NEW, SALE, FREE, POPULAR, HELP or UPDATED beside selected navigation links to highlight launches, offers, support areas or free resources. You choose which links receive badges through simple settings in the code, with the label matched to the navigation item name.
Mobile is covered too. The kit includes a pill style mobile header so your mobile navigation feels consistent with desktop, plus a rounded overlay card style for the mobile menu with optional shadow, page fade and custom hover colours. It gives the default full screen mobile menu a more intentional, app like feel. One honest caveat: it styles the mobile menu rather than rebuilding it, so mobile folders keep the native Squarespace behaviour and do not open as accordions.
The kit is designed for Squarespace 7.1 standard header navigation, and because headers vary, some small spacing tweaks may be needed depending on your logo, number of links and header settings. You can use it on multiple sites, which makes it a handy addition to a designer's toolkit for client work. If your header feels basic and you want your menu to look more premium without a full custom build, this is a simple, lightweight way to get there.
On desktop, you can turn your standard navigation links into a soft pill shaped menu, or go further with a fully rounded header bar for a floating look. Each style includes clearly labelled settings for background colour, border radius, spacing, shadow, borders and hover effects, so matching the kit to your brand takes minutes rather than hours.
Dropdown menus get the same treatment. The kit upgrades standard Squarespace dropdowns with rounded corners, cleaner spacing, soft shadows and smoother hover effects, with an optional frosted glass blur for a more premium feel. This is especially useful on sites with multiple services, resources or shop categories where dropdowns do a lot of work.
Navigation badges are one of the most practical inclusions. You can add small labels such as NEW, SALE, FREE, POPULAR, HELP or UPDATED beside selected navigation links to highlight launches, offers, support areas or free resources. You choose which links receive badges through simple settings in the code, with the label matched to the navigation item name.
Mobile is covered too. The kit includes a pill style mobile header so your mobile navigation feels consistent with desktop, plus a rounded overlay card style for the mobile menu with optional shadow, page fade and custom hover colours. It gives the default full screen mobile menu a more intentional, app like feel. One honest caveat: it styles the mobile menu rather than rebuilding it, so mobile folders keep the native Squarespace behaviour and do not open as accordions.
The kit is designed for Squarespace 7.1 standard header navigation, and because headers vary, some small spacing tweaks may be needed depending on your logo, number of links and header settings. You can use it on multiple sites, which makes it a handy addition to a designer's toolkit for client work. If your header feels basic and you want your menu to look more premium without a full custom build, this is a simple, lightweight way to get there.
What it does
- Adds soft pill shaped styling to desktop navigation links
- Upgrades dropdown menus with rounded corners, spacing and soft shadows
- Adds badges like NEW, SALE or FREE beside chosen navigation links
- Restyles the mobile menu as a rounded overlay card with a pill style mobile header
Full specifications
Specifications
Squarespace Version
7.1
What it does
Adds soft pill shaped styling to desktop navigation links
Upgrades dropdown menus with rounded corners, spacing and soft shadows
Adds badges like new, sale or free beside chosen navigation links
Restyles the mobile menu as a rounded overlay card with a pill style mobile header
Upgrades dropdown menus with rounded corners, spacing and soft shadows
Adds badges like new, sale or free beside chosen navigation links
Restyles the mobile menu as a rounded overlay card with a pill style mobile header
Key Features
Full or condensed floating pill header designs
Optional frosted glass dropdown styling
Clearly labelled settings for colours, spacing, shadows and hover effects
Works with your existing squarespace navigation, no header rebuild needed
Optional frosted glass dropdown styling
Clearly labelled settings for colours, spacing, shadows and hover effects
Works with your existing squarespace navigation, no header rebuild needed
Best for
Squarespace 7.1 site owners
Designers polishing client site headers
Brands wanting a more premium navigation look
Anyone who wants styling upgrades without a mega menu setup
Designers polishing client site headers
Brands wanting a more premium navigation look
Anyone who wants styling upgrades without a mega menu setup
Setup Difficulty
Easy
Considerations
Compatible with squarespace 7.1 only
This is a styling kit, not a mega menu plugin
Some styles require code injection, others use custom css only
Mobile folders keep the native squarespace behaviour, they do not become accordions
Small spacing tweaks may be needed depending on your logo and header settings
This is a styling kit, not a mega menu plugin
Some styles require code injection, others use custom css only
Mobile folders keep the native squarespace behaviour, they do not become accordions
Small spacing tweaks may be needed depending on your logo and header settings
FAQs
FAQs
What is the Squarespace Navigation Upgrade Kit?
It is a styling kit from The Square Genius that upgrades your existing Squarespace navigation with pill shaped desktop menus, a rounded full header bar, polished dropdown styling, navigation badges, a pill style mobile header and a rounded mobile menu overlay card.
Is this a Squarespace mega menu plugin?
No. It does not add columns, images or complex mega menu layouts. It is designed to make your existing Squarespace navigation look more custom and premium. If you need a full mega menu, a dedicated mega menu plugin is the better fit.
Which Squarespace versions does it support?
The kit is only compatible with Squarespace 7.1 sites and is designed for the standard 7.1 header navigation.
How is the Squarespace Navigation Upgrade Kit installed?
Installation uses copy and paste snippets. Some styles only need Custom CSS, while others use small Code Injection snippets. You keep managing your pages, folders and links inside Squarespace as normal, with no header rebuild required.
Does the kit work on mobile?
Yes. It includes a pill style mobile header option and a rounded mobile menu overlay card with optional shadow, page fade and custom hover colours. Note that mobile folders keep the native Squarespace behaviour and do not open as accordions.
Can I use the kit on client sites?
Yes. The Square Genius allows the plugin to be used on multiple sites, which makes it practical for designers and agencies working on client projects.