Round 2: the new site-wide header

Header reused verbatim from the Personal board's Round 3 (stakeholder Figma comp): 84px white bar with 1px #E4E4E4 top and bottom borders, no shadow, 300px logo, PERSONAL · BUSINESS · COMPANY (Lato 700 15px, 0.06em tracking, #5D7A92, 44px gaps; Company replaces About), LOG IN and SIGN UP ↗ as full-height cells on the container's right edge. No search, no phone. The four dropdowns are unchanged pending feedback; each panel is now seated flush under the header's bottom border with 1px #E4E4E4 sides and bottom and no shadow, the open BUSINESS label in navy with a 2px underline, and Log in / Sign Up removed from inside the panels.

Log in Sign up

Business Foreign Exchange

Every day, we help businesses save money by cutting excessive bank fees and removing the need for opaque broker charges.

AWalker-native, four columns

What the existing sf_mega_menu_walker produces with zero new code: four 25% columns, the theme's 18px bold column headings, 14px links with hairline dividers, no descriptions. Overview sits in a grey footer row. Employers and Work with us share a column.

• Pure menu configuration in Appearance → Menus; ships this week
• Looks exactly like the rest of the theme, so nothing to maintain
• All 20 links visible in one glance, tallest column is 6 rows
• Nothing lifts the agencies push above Import & Export
• Labels alone: a first-time visitor cannot tell Market Orders from Currency Options
• Rigid grid leaves a tall empty gap under short columns

Business Foreign Exchange

Every day, we help businesses save money by cutting excessive bank fees and removing the need for opaque broker charges.

BFeatured agencies panel + footer stripRecommended

Three link columns with one-line descriptions, a brand-gradient featured card for the agencies proposition, and a footer strip carrying Work with us plus Log in / Sign Up / Book a call. The card uses the theme's blue-to-turquoise gradient already seen on the hero CTA.

• Agencies push gets real weight without stealing the columns
• Descriptions let a scanner separate five risk products at a glance
• Footer strip gives every column a conversion path, including the sales call
• Fits the walker: descriptions are one commented-out line (custom_walker.php:71); the card is an htmlcontent menu widget the walker already supports
• Busiest of the four; needs the copy discipline kept (no description over eight words)
• Card competes with the green Sign Up button for attention in the same viewport

Business Foreign Exchange

Every day, we help businesses save money by cutting excessive bank fees and removing the need for opaque broker charges.

CTask-led with icons, natural width

A narrower 820px panel anchored under the nav rather than spanning the container. Small uppercase group labels, 18px line icons in the theme blue, one-line descriptions, Overview as a top row, and Industries demoted to a chip row where the agencies chip is the highlighted one.

• Reads as a product menu first: risk, scale, employers, partners
• Icons give each product a memorable shape; the panel feels current without leaving Lato and the theme blue
• Industries as chips take one row instead of a whole column
• Icons are new assets the theme does not have; 20 SVGs to design and maintain
• Chips hide the industries descriptions and the agencies emphasis is subtle
• Narrower panel wastes the 1140px the theme already reserves

Business Foreign Exchange

Every day, we help businesses save money by cutting excessive bank fees and removing the need for opaque broker charges.

DSplit panel: products left, industries right

Two-tone panel. Left two-thirds is white and compact: Overview row plus three product groups with small uppercase labels and no descriptions. Right third is the theme's #f7f7f7 grey with Industries and Work with us, and the agencies item rendered as an inset callout card with the media-spend line.

• Products and industries are visibly two different kinds of thing
• Agencies callout is emphasised but stays in its natural place in the list
• Compact: the whole panel is under 330px tall
• No descriptions on products, same scanning problem as A
• Two-tone panel is a new pattern for this theme; the existing dropdowns are all white
• Log in / Sign Up only in the header, no in-panel contact path

Business Foreign Exchange

Every day, we help businesses save money by cutting excessive bank fees and removing the need for opaque broker charges.

Mobile treatment (variant B, applies to all four)

The theme's off-canvas menu (#mobile-menu-wrap: 320px, #222, white 14px rows, 13px sub-rows on #333 indented 30px) with Business expanded as an accordion. Group names become small uppercase labels inside the Business sub-menu; the agencies card collapses to a compact row at the end of the group. Since all four desktop variants share the same links, this one mobile menu serves whichever direction is chosen.

☰

Business Foreign Exchange

Search✕

☰

Business Foreign Exchange

Every day, we help businesses save money by cutting excessive bank fees.

Round 2: the phone's closed-state header now follows the new site-wide header (white, 1px #E4E4E4 top and bottom borders, no shadow, logo, burger). The accordion itself is unchanged.

What changes from today's mobile menu

• Log in and Sign Up stay as the blue and green rows at the top (unchanged).
• Business, Personal and About are the only headings; Business opens the accordion, the other two are links (Personal could accordion the same way later).
• Group labels are not links; they are 11px uppercase on a slightly lighter #2a2a2a row so they read as dividers, not items.
• Rows stay 42px tall (the theme's 10px padding on 22px line-height), so touch targets are unchanged.
• New / Proposed tags become outline tags on the dark background.
• The agencies card is optional on mobile; drop it if the accordion feels long. It is the last row so it never pushes links down.

Theme tokens used (extracted, not invented)

Read from dante-child/style.css, the parent theme's style.css mega-menu rules, and the computed styles of the live header at localhost:8180/business-foreign-exchange.

• Font: Lato 300 / 400 / 700, self-hosted in dante-child/assets/fonts/lato-v17-latin-*.woff2; embedded here as data URIs so the board is standalone. Stack: "Lato", Arial, Helvetica, Tahoma, sans-serif.
• Header: header-6 layout, 25px top padding, 93px tall at 1280px (min-height 91px reserved), shadow 0 3px 5px rgba(0,0,0,.1), container 1170px.
• Logo: 250×42, ct-header-logo-retina-1.png (500×84 source), margin-top 3px.
• Nav items: 14px/22px Lato 400, #252525, padding 10px 0 12px, li padding 0 10px 20px; hover #1695ca with a 1px .nav-line at bottom 8px.
• Buttons: Log in #1695ca (hover #2cbec5), Sign Up #41b412 (hover #5dbf35), white text, padding 10px 15px 12px, radius 5px. SS Gizmo key/compose glyphs redrawn as inline SVG.
• Dropdown base: .sub-container top 63px, 1140px wide at ≥1200px, white, shadow 0 1px 3px rgba(0,0,0,.1); column heading 18px/700 padding 15px; items 14px #666 padding 12px 15px, hover #000 on #f7f7f7; dividers #e4e4e4 / #f0f0f0.
• Mobile: off-canvas 320px #222; rows 14px white padding 10px 15px; sub-rows 13px, padding-left 30px, background #333; Log in row #1695ca, Sign Up row #41b412.