Desktop nav

Images and videos for this page, original size: Asset library →

All frames load the live prototype, so any edit shows in all of them. Open full page →

Desktop 1440 Shop menu open on load. Hover or click Shop / Learn to try it.

Desktop 1440 - Mushroom Elixirs hovered tiles swap per category

Desktop 1280 Shop menu open

Desktop 1440 Learn menu open

Dev instructions - desktop nav (read first) 22 Sep 2026. Everything needed to build arm B. Prototype source: /top-bar (view source for markup and CSS).

#AreaInstruction
1ScopeDesktop only (901px and up). The mobile drawer is live and final - do not change it. Built as arm B of a desktop-only Intelligems test (arm A = current live nav). James creates the test; dev builds both arms.
2Top barLeft: Shop (opens mega menu, caret) | Lab Results | Science | Learn (opens panel, caret). Logo centred (absolute, true centre). Right: GBP region selector, search, account, cart. No quiz button in the header. Height 68px, Morning Mist #D1E0D7, text Obsidian #161F28. Hover/open state = 2px Forest Fern underline, text stays ink (contrast).
3Top bar linksLab Results -> /pages/mould-and-pesticides-independent-laboratory-test-result. Science -> /pages/healthy-coffee-science. Carets only on Shop and Learn (they open panels; the others are plain links).
4Menu behaviourOpens on hover after 120ms, closes 200ms after the pointer leaves (no flicker crossing the bar). Also opens on click, Enter and Space. Top item is a button with aria-expanded + aria-controls. ArrowDown or Tab moves into the panel; Tab off the last link goes to the next top item; Escape closes and returns focus. One panel open at a time. A 28% Obsidian dim covers the page below; clicking it closes. prefers-reduced-motion = no fades.
5Shop panel layoutFull-width white panel under the header, content max 1400px. Left column 240px (220px under 1380px): 4 category rows (Canela 19px, 52px rows, hairline dividers, chevron) then "Shop all" link directly under Coffee Gifts. Right: 4 equal columns.
6Hover-to-browseHovering (150ms intent) or focusing a category row swaps the right-hand tiles to that category. Clicking the row opens the collection. Default and reset-on-close = Beans & Ground. All sets share one grid cell so the panel never changes height.
7Tiles per categoryBeans & Ground: Bestseller Bundle, Darkfire Energy, Stability Blend (Darkfire 2nd so it does not sit beside the Darkfire-led range image - James 22 Sep). Coffee Pods: Clean Coffee Pods (Stability) - add Darkfire pods as slot 2 when it launches (no Darkfire pods photo exists yet; designer to supply). Mushroom Elixirs: Mushroom Elixir Bundle, Lion's Mane Elixir, Cordyceps Elixir. Coffee Gifts (James 22 Sep, this order): "Pods Gift Subscription", "Coffee Gift Subscription" (/products/monthly-gift-subscription), "Mushroom Coffee Gift" (/products/lions-mane-coffee-3-month-gift-subscription). DEV: create a Pods Gift Subscription product (same setup as the Coffee Gift Subscription, with Clean Coffee Pods) - until it exists the tile links to /collections/nespresso-pods. No Gift Card tile. No Christmas imagery on any gift tile out of season.
8Tile designSoft card #EDF0ED, radius 8px, square pack shot shown whole (object-fit cover on the square source - no zoom), name Area 600 15px + ONE short line 13px. Build as theme section blocks (image, title, line, chip, link) so James can edit them in the customiser.
9Chips (data-driven)"Best seller" on Stability Blend. "Save up to 24%" on Bestseller Bundle (vs three 250g singles). "Save 24%" on Mushroom Elixir Bundle (vs four single bottles). "Sold out" must come from LIVE inventory, never hard-coded. Re-check both saving % whenever single or bundle prices change.
10Lines on tilesBundle: "Three customer favourites". Stability: "Medium roast". Darkfire: "Dark roast". Pods: "Stability Blend". Elixir Bundle: "Your wellbeing toolkit". Lion's Mane: "Focus & mental clarity". Cordyceps: "Energy & endurance" (James 22 Sep: mirror the benefit tags on the live Mushroom Elixirs collection cards). Gifts: titles "Pods Gift Subscription", "Coffee Gift Subscription" (full word, SEO), "Mushroom Coffee Gift" (James 22 Sep: fits one line at 1280; "Lion's Mane Gift Subscription" wraps), lines "Nespresso® compatible", "Beans & ground", "3-month subscription". NO prices anywhere in the menu (consistency; price is shown on the product page). Every tile title and line is ONE line - the price is the LOWEST variant, pulled from the product, never typed in.
114th slotONE tile built exactly like the product tiles beside it: a square LIFESTYLE image for the category (files in nav-redesign-assets/lifestyle/: lifestyle-beans / -pods / -elixirs / -gifts.webp) and below it the CATEGORY NAME + arrow as the title ("Beans & Ground →", "Nespresso Compatible Pods →" (James 1 Oct: the left tile already says Clean Coffee Pods), "Mushroom Elixirs →", "Coffee Gifts →") with "View all" as the line, linking to that collection (James 22 Sep). One CTA per tile (James 22 Sep). No quiz card here.
11bQuiz + Shop all"Take the Quiz" -> /pages/quiz: plain text (14px Area 600, Obsidian), NO background, followed by a 28px round arrow button (1px Forest Fern outline, fills Fern on hover), pinned to the bottom of the left column so it lines up with the tile bottoms. "Shop all" is quieter than the category rows: 13px regular, Obsidian at 60%, hairline underline at 25%, Forest Fern on hover.
12Learn panel4 image tiles built with the SAME card as the Shop tiles (#EDF0ED card, 8px radius, image flush on top at 3:2, name Area 600 15px + line 13px left-aligned, 1.03 image zoom on hover), names and lines as live: How To Brew / Find your guide, Founder Story / Meet James, Sustainability / For the Planet, Read Our Blog / Get Barista Smart. NEW images supplied in nav-redesign-assets/learn/ (960x640 webp) - upload to Shopify Files.
13Removed from desktopCoffee, Mushroom Tinctures and Coffee Gifts as top-level items (now inside Shop). Brewing Equipment. Reviews in the top bar (still in the Trustpilot banner item and the footer). Quiz in the header.
14ResponsiveUnder 1380px: narrower left column (220px) and nav gap 24px (the 4 top items must clear the centred logo). Under 1100px the tiles drop to 2 columns. At 900px and below the mobile drawer takes over.
15Tracking (GA4)Every link carries data-ga-item + data-ga-slot. Fire menu_open and nav_item_click (item label, section, slot, device) and select_item with item_list_name "desktop_menu". Full spec: GA4 menu tap tracking brief (James has it). Must be live on day one of the test.
16Fonts and coloursCanela Regular for category rows, tile headings and Learn names; Area for everything else - use the theme's existing files. Colours: Morning Mist #D1E0D7, Forest Fern #516E5A, Obsidian #161F28, Arctic White #EDF0ED. Radius 8px (thumbnails 6px).
17Do notDo not change copy beyond what is listed here. Do not ship the review-only URL switches (?mega=, ?cat=, ?shop=list, ?rules=0). Do not launch, pause or end the test - James does that in Intelligems.