Theme · Header
Menu Item Styles
A dozen hover / current-page treatments plus stackable modifiers for the header menu — set once in Theme Settings → Header → Menu.
Live demo
See it in action
Each section shows one style on a mock menu bar. The first item is the current page, so its active treatment shows at rest — hover the others to preview the animated states.
Menu Item Style
None
Colour only — the current item takes the accent colour, with no hover treatment.
Menu Item Style
Underline (animated)
A 2px underline grows in from the centre on hover and for the current page.
Menu Item Style
Underline (static)
A simple 2px rule fades in beneath the item on hover and for the current page.
Menu Item Style
Gradient Underline
The underline is a two-tone gradient — a richer take on the plain rule.
Menu Item Style
Pill
A fully-rounded filled pill on hover and for the current page.
Menu Item Style
Box
A soft rounded fill on hover and for the current page.
Menu Item Style
Marker
An angled, semi-transparent felt-tip swipe behind the text.
Menu Item Style
Outline
A bordered box in the accent colour on hover and for the current page.
Menu Item Style
Dot
A small dot marker sits centred beneath the item.
Menu Item Style
Sliding
A single pill glides between items on hover and rests under the current page. The premium "magic" indicator.
Stackable
Modifiers
Orthogonal extras that combine with any primary style above. Shown here layered on a static Underline.
Modifier
Bold
The label goes bold on hover and for the current page.
Modifier
Letter-spacing
Tracking widens slightly on hover / current.
Modifier
Uppercase
Nav labels render in uppercase with a touch of tracking.
Modifier
Glow
A soft accent glow blooms behind the text — best on dark headers.
Modifier
Fade rest
Inactive items rest dimmed; the current / hovered item is full strength.
The markup
How it renders
You never write this by hand — pick a style in Theme Settings and the theme adds the menu-style-* body class and the matching CSS. No per-page markup.
<!-- Theme Settings → Header → Menu → Menu Item Style --><!-- The theme adds a body class and styles the header nav under it. -->
<body class="menu-style-pill">
<nav class="site-header">
<ul class="primary-menu">
<li class="menu-item current-menu-item"><a href="/">Home</a></li>
<li class="menu-item"><a href="/features/">Features</a></li>
<li class="menu-item"><a href="/pricing/">Pricing</a></li>
</ul>
</nav>
</body>To learn more, check out the theme documentation here.