Nav stack: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/nav-stack.html Core Patterns (https://patternpaste.com/patterns/) Header (https://patternpaste.com/patterns/nav/) Free Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The wordmark. Replace "Hallmere" with your name. - The meta row. Address, hours and telephone are the three a studio uses. - 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 rule weights. The hairline is 1px and the heavy rule 3px, both on the groups rather than as separators. - The height. The row padding is spacing presets 30 and 40. 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Both rules. - Your spacing scale. - Your menu. ### Set by this pattern - Full bleed, own measure. - The meta row's scale. - The wordmark's ramp. - The action's colours. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview A page header set as a masthead: a micro-row of meta over a hairline, and under it the main row of wordmark, links and one action over a heavy rule. It is the first thing on a page and it does one job, which is to name the site and give the four ways out of it. ### 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. Make it yoursVariations and the edits to make first ### What to change first - The wordmark. Replace "Hallmere" with your name. It is a heading, so it is also what a screen reader announces first. - 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. - 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. - 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. - The height. The row padding is spacing presets 30 and 40. Step both down one rung if the masthead feels tall against your hero. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. ### 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. Questions ## Nav stack: common questions Does Nav stack need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading, navigation and paragraph), so it pastes into the block editor with nothing to install. Will Nav stack match my theme? Choose by variation. Paper masthead and Night masthead take your theme’s palette; Bough, Parchment and claret, Spur and Vow bring its own colours. How many variations does Nav stack have? 6: Paper masthead, Bough, Night masthead, Parchment and claret, Spur and Vow. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Nav stack free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription. Which WordPress version does it need? 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Page header Page header cover strip An interior-page opener with a small location label, h1 title and short introduction in a narrow full-height plate of your theme's base beside a broad uninterrupted photograph. The photograph stays dominant on wide screens; on a phone the title strip reads first. Includes a replaceable example photograph. States no colour and no font of its own. (https://patternpaste.com/pattern/page-header-cover-strip.html)Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Header Access Free Plugin None, core blocks only Variations 6 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, navigation, paragraph Presets color 6, spacing 3, font-size 1 WordPress 7.0+ Continue exploring ## Next in Header Explore all 6 Header patterns (https://patternpaste.com/patterns/nav/) Shot in Twenty Twenty-Five Header No plugin needed ### Nav menu The header that drives a real menu: your site logo and name at the left, your WordPress navigation menu standing against a full-height currentColor hairline, and a search field with a visible label behind it. Header Preview pattern (https://patternpaste.com/pattern/nav-menu.html) Shot in Twenty Twenty-Five Header No plugin needed ### Header station board A compact wordmark and broad destination links turn the header into a typographic signboard, with a separate address and opening-hours rail. Header Preview pattern (https://patternpaste.com/pattern/nav-station-board.html) Shot in Twenty Twenty-Five Header No plugin needed ### Nav utility bar A local-business header in two bands: a thin reversed strip across the top carries a tap-to-call telephone number, the opening hours and the area served, and under it the bar holds the name, your WordPress menu and one Book online button over a hairline. Header Preview pattern (https://patternpaste.com/pattern/nav-utility-bar.html)