[Library] Header

Catalogue accessStandard

Nav bar

A header bar on one line: a heavy, tightly tracked wordmark at the left edge against tiny widely tracked links at the right, one solid action beside them, and a hairline under the whole bar. Compact by construction, so it reads as the top of a page and never as a hero. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

The bar at the top of a page: the name, four ways through the site, one action, and a hairline under all of it. It is deliberately the shortest section in the catalogue. A header that grows tall stops being a header, so every measurement in it is chosen to keep the bar under about 80px at desktop.

The signature moment

The scale collision on one line

The signature is two type sizes with nothing between them, on the same baseline. The wordmark is set heavy (800) and tightly tracked (-0.04em) at up to 36px; the links beside it are set at 15px, uppercase, at 0.22em, which is the widest tracking anywhere in this pattern's family. There is no mid-size text on the line to soften the jump, so the eye reads the name as a mark and the links as a legend under a drawing. In a colourless design that jump is the whole of the composition: nothing here is tinted, boxed or shadowed to make it work.

The hairline is the second half of it. It is a 1px currentColor border on the bar itself, not a separator block, so it cannot be narrowed by a theme that restyles separators, and it follows the text colour wherever the theme puts it.

What it inherits from your theme

  • The typeface. No family is stated anywhere. The collision is built from weight, size and tracking, so it survives a serif theme and a sans one.
  • Your colours. The ground asks for base, the type asks for contrast, and each falls back to a colour WordPress itself guarantees, so the bar cannot blank.
  • Your button styling, on the links too. The four nav links are core buttons with a transparent ground, so they carry your theme's button hover and focus behaviour while looking like plain type. They ask for contrast rather than taking your theme's link colour, which is the one thing that changed when they were given a real tap target: an anchor inside a paragraph is as tall as its font and nothing an attribute can say makes it 44px, so the link had to become a block that carries padding.
  • Your button. The action is a core button. Its corners are squared here, but its padding rhythm, its hover state and its focus ring are your theme's.

What it decides for itself

  • Full bleed with its own 1240px inner. The bar spans the viewport and holds its content to a measure, which is what makes it a bar rather than a column.
  • Compact padding. clamp(0.875rem, 1.4vw, 1.25rem) top and bottom, stated rather than taken from a spacing preset, because a theme with a generous scale would turn preset 40 into a band. The horizontal padding is the usual clamp(1.25rem, 4vw, 4rem) so the bar's edges line up with the sections under it.
  • The 15px floor on the links. A bare small preset is 13px in a theme with no scale, which is under the readable floor, so the links state max(0.9375rem, 15px) instead. The size, weight, tracking and case sit on the core/buttons wrapper rather than on each button: WordPress 6.6 serialises a button's own typography onto the wrapper div and 7.0 onto the anchor, so no single markup carrying it on the button is valid at both.
  • A 44px tap target on a phone. The links carry 0.95rem of vertical padding, measured at 45.4px tall in both stock themes, which is why the bar is a few pixels taller than it was and why the links now line up with the action beside them.
  • The action inverts. The button takes the contrast ground and base text, so it is the one solid object on the bar and it cannot vanish into it: the two chains are each other's opposites in any theme.
  • How it behaves at 390. Nothing is hidden and there is no menu button, because a pattern carries layout and never behaviour. Below the flex row's wrap point the wordmark keeps the first line and the links and the action drop to the line under it, left-aligned, wrapping among themselves. The bar grows to about three lines on a phone and stays a bar. If you want a hamburger, replace this bar with a core/navigation block; that is a job for a block, not a pattern.

What to change first

  1. The wordmark. Replace "Hallmere". It is a heading, so if you have a logo image instead, swap the heading for an image block and keep the row.
  2. The four links. They ship pointing at #. Set the URLs, and keep the labels to one word each: at 0.22em tracking a two-word label eats the line. Four is the number this composition is tuned for; five still fits at 1400 and wraps sooner on a laptop.
  3. The action's label and link. The button ships without a URL. Make the label a verb.
  4. The bar's weight. If your theme's face is already heavy, step the wordmark from 800 to 700 rather than making the links smaller: the links are at their floor.
Variations39 words
  • Mark right. The same bar mirrored: links and action first from the left, the wordmark hard against the right edge. One structural change and nothing else; the colours, the type and the hairline are identical to the base.
Notes49 words
  • Core blocks only: group, heading, buttons, button. No plugin.
  • Every colour is a fallback chain ending on a core-guaranteed colour, and the hairline is currentColor, which cannot resolve to nothing.
  • No text sits on an accent, in any rung. There is no accent in this pattern.
Back to the library

Continue exploring

Next in Header

Explore all 3 Header patterns