# Nav stack > A header built as a masthead rather than an app bar: a micro-row of tracked uppercase meta (address, hours, telephone) sits over a hairline, and under it the main row carries the wordmark, your WordPress menu and one filled action over a 3px rule. Two stacked rows, two rules of different weight, both held to the same measure, so the top of the page reads as printed matter; on a phone the menu folds to a button and the main row stays one line. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/nav-stack.html Section: Header Access: Free, and free to keep. Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Blocks: button, buttons, group, heading, navigation, paragraph Keywords: header, masthead, navigation, menu, nav, rules, hamburger ## Variations (6) ### Paper masthead (the default) Identical markup in every theme. Your base ground with your contrast type, the meta row over a hairline and the main row over a 3px rule, both rules in currentColor so they follow your text wherever your theme puts it. ### Bough This variation states its own colours and states its own type: identical in every theme. The Bough tree surgeon set: a birch-bark masthead with Brimscombe Port and the hours in muted pine and the storm call-out in hi-vis orange over a hairline, Bough in bold Rockwell, Trebuchet links over a 3px pine rule and a filled pine Call 01632 960 482 button. ### Night masthead Identical markup in every theme. The colour axis, done the only way the contract guarantees: the whole masthead inverts to your contrast with your base on it, both rules follow the type because they are currentColor, and the action inverts back so it still reads as the lit thing in the row. ### Parchment and claret This variation states its own colours and states its own type: identical in every theme. A restaurant masthead: a #f4ecdc parchment ground with #3a1a1c ink, both rules and a square Book a table button in #7a1f2b claret, the name in italic Georgia over Helvetica and Arial for the address, hours, telephone and menu. ### Spur This variation states its own colours and states its own type: identical in every theme. The Spur electrician and plumber set: a cable-black masthead with the address and hours in slate and the emergency number in signal yellow over a hairline, SPUR in Arial Black, bold Arial links and a square live-blue Get a quote button. ### Vow This variation states its own colours and states its own type: identical in every theme. The Vow wedding set: a wisteria-white masthead with the date in peony over a wisteria hairline, Nell & Sam in Didot with an italic ampersand, Gill Sans links over a 3px midnight rule and a square midnight RSVP button. --- ## The signature moment: the double rule **The signature is the two rules of different weight, stacked.** A hairline under the meta row and a 3px rule under the main row, both held to the same 1240px measure rather than bled to the viewport, is the oldest device in printed matter: it says nameplate before a single word is read. Nothing else in the section is trying to be clever. The wordmark is set in caps with open tracking against the meta row's tiny tracked caps, and the two rules do the rest. That is also what separates it from `nav-bar`, which puts everything on one line and gets its signature from the collision of a heavy wordmark against tiny links. This one is deliberately two rows: the meta a masthead can carry (address, hours, telephone) has nowhere to live on a single line. ## What it inherits from your theme - **The typeface.** The pattern states no font family anywhere. The masthead is set in your face, serif or sans. - **Your colours.** The ground asks for `base` and the type asks for `contrast`, the two slugs every stock block theme defines. If a theme defines neither, the header falls back to white and black and still works. - **Both rules.** They are `currentColor`, not a colour of ours, so they cannot blank and they follow your text colour wherever your theme puts it. - **Your spacing scale.** The row padding is stated as spacing presets, so a theme with a generous scale gets a taller masthead without you editing anything. - **Your menu.** The links are a `core/navigation` block: the masthead shows the menu your site has, in your theme's link colour, falling back to `contrast`. With no menu assigned core lists your pages, which is what the preview's sample site shows. The action is a core button carrying your theme's element styles, so hover and focus are yours. ## What it decides for itself - **Full bleed, own measure.** The ground spans the viewport; the content and both rules are held to 1240px, so the rules line up with the page's content rather than running off the edge. - **The meta row's scale.** 15px minimum, uppercase, tracked at 0.14em. It reads as fine print because of the tracking, not because it is small: anything a visitor actually reads stays at or above the 15px floor. - **The wordmark's ramp.** A `clamp()` from 24px to 36px, weight 700, caps, and tracked open at 0.06em, which is the nameplate move rather than the logotype move. - **The action's colours.** The links are plain type in the menu; the action inverts to the contrast ground with base type, so the one thing worth clicking is the one thing with a filled box round it. The two chains are each other's opposites, so it cannot vanish in any theme. ## At 390 The navigation block is set to `overlayMenu: mobile`, so below 600px core swaps the links for its menu button and the main row stays one line: the wordmark at the left, the button and the filled action together at the right. The button opens core's full-screen overlay with the menu in it. The meta row's three items still break onto their own lines under each other, and the hairline stays under all of them, because a masthead's meta is content and not navigation. Measured at 390 in both stock themes: no overflow, and the heavy rule holds under one row. ## What to change first 1. **The wordmark.** Replace "Hallmere" with your name. It is a heading, so it is also what a screen reader announces first. 2. **The meta row.** Address, hours and telephone are the three a studio uses. Any three short facts work: a location, a status line, a number. Delete one and the row still reads. 3. **The menu and the action.** Select the navigation block, then Menu, and point it at yours; keep the labels to one word each, the row's rhythm is built on it. The action ships without a URL. 4. **The rule weights.** The hairline is 1px and the heavy rule 3px, both on the groups rather than as separators. Take the heavy one to 4px or 6px if your theme's face is heavy enough to carry it. 5. **The height.** The row padding is spacing presets 30 and 40. Step both down one rung if the masthead feels tall against your hero. ## Styled look: Parchment and claret A restaurant or venue masthead that brings its own colours and faces: `#f4ecdc` parchment ground, `#3a1a1c` ink, and both rules and a square Book a table button in `#7a1f2b` claret with parchment type. The name is italic Georgia; the address, hours, telephone and menu are Helvetica and Arial in sentence case. The navigation block states its overlay colours, so the phone menu opens on parchment. The same composition as the base, double rule included; only the palette and the faces are stated. ## Notes - Core blocks only: group, paragraph, heading, navigation, buttons, button. No plugin; the menu button is core's own, driven by WordPress's Interactivity API. - Every colour is a fallback chain ending on a colour WordPress itself guarantees, so nothing in the header can resolve to nothing. - The rules are per-side group borders rather than `core/separator`, which Twenty Twenty-Four narrows to a centred stub unless it is `is-style-wide`. - No typography on the button: a button's typography has serialised to the outer div in some editor versions and the anchor in others, so it does not stay valid across them. The menu states none either; it is set at your theme's own size.