Squarespace 7.1Navigation & Menus

Main Nav Buttons - Full Height Underlines

By Will's Toolkit

$15.00
Main Nav Buttons - Full Height Underlines snippet from Will's Toolkit, preview from the Code Catalog – Squarespace Navigation & Menus on SquareLocator
Fit check
Great for
Retail Brands
Creative Studios
Fashion Brands
Small Businesses
Know before you buy
  • Members-only code: you need an active Will's Toolkit subscription to see and copy it
  • Needs a Squarespace plan that allows custom code
  • A styling snippet rather than a configurable plugin, so changes beyond the design shown mean editing CSS
Version7.1
SetupEasy

Overview

Main Nav Buttons - Full Height Underlines is a Header and Nav snippet from Will's Toolkit that marks the hovered or active main navigation link with an underline sitting at the very bottom edge of the header. Will's animated preview shows a line sliding beneath Shop, Our Story, Gallery and About as the cursor moves across the menu.

What you get

  • Code that adds an underline at the base of the header for nav links
  • Hover and active states for main navigation
  • Access to the full Will's Toolkit Code Catalog with membership

Who it suits

Sites with a clean, minimal header that want a clear active state without boxes or colour blocks, such as shops, studios and editorial sites.

Honest limits

  • Members-only code: you need an active Will's Toolkit subscription to see and copy it
  • Needs a Squarespace plan that allows custom code
  • A styling snippet rather than a configurable plugin, so changes beyond the design shown mean editing CSS
  • Styles the desktop header navigation; the mobile menu is unchanged

How it is delivered

This snippet sits in the Code Catalog of Will's Toolkit, Will Myers' membership for Squarespace designers, and is marked members only. Membership is $15 a month or $150 a year and includes the full Code Catalog, the Toolkit browser extension, the Robo-Will AI assistant, the Slack community and 20 per cent off Will's plugins. Snippets are copy and paste code added to your site. Will's catalogue lists it under Header & Nav, last updated 4/30/2025.

Related guide: browse every plugin we list in the Squarespace plugins collection, or read our roundup of the best Squarespace plugins in 2026.

Main Nav Buttons - Full Height Underlines is a header snippet from Will's Toolkit. Rather than a short underline hugging the text, the indicator sits at the bottom edge of the header beneath the hovered or current link, which gives a tidy, tab-like feel to a minimal navigation bar.

It is a desktop navigation effect, and the mobile menu stays as Squarespace builds it. A pilled variation, which uses rounded filled shapes instead, is also in the Toolkit.

It is part of Will's Toolkit, Will Myers' membership for Squarespace designers, rather than a one-off purchase. Membership costs $15 a month or $150 a year and unlocks the full Code Catalog of more than 100 snippets, the Toolkit browser extension, the Robo-Will AI assistant, a Slack community and 20 per cent off Will's paid plugins.

The honest caveats: the code is members only, it needs a Squarespace plan that allows custom code, and as a styling snippet it does one job well rather than offering a settings panel. Anything beyond the design shown means editing the CSS yourself.
What it does
  • Adds a full height underline indicator to main nav links
  • Highlights the hovered and current page link
Full specifications

FAQs

FAQs

What does Full Height Underlines do?
It shows an underline at the bottom edge of the header beneath the hovered or current main navigation link, as in Will's animated preview.
How is it different from Main Nav Buttons - Pilled?
Full Height Underlines uses a line at the base of the header. Pilled wraps the link in a rounded filled shape.
Does it affect the mobile menu?
It styles the main desktop navigation. The mobile menu keeps its usual Squarespace behaviour.
How do I get this snippet?
Join Will's Toolkit, Will Myers' membership, at $15 a month or $150 a year. The snippet is in the members-only Code Catalog along with over 100 others.
How is it installed?
It is copy and paste code. You add it to your Squarespace site, then adjust colours or sizes in the CSS if you want to match your brand.
Do I need a particular Squarespace plan?
You need a plan that allows custom code. The Toolkit is built for Squarespace 7.1.