Topbar unchanged and still scrolls away. Mobile (<1024px) unchanged: hamburger + drawer. The two-row header exists because the cart/account icons Hyper designs around are hidden on this B2B site — the compact row is the layout the content actually calls for.
.header__top (logo/search/icons on a CSS grid driven by
header_layout) + .header__bottom (nav row). Topbar is a separate section above, outside the sticky wrapper.position:absolute; width:100% whose containing
block is .header__bottom (it carries relative). The panel actually sits at the row's top:0 and is pushed
below by .mega-menu__container{ padding-block-start: var(--header-navigation-height) } — it slides down from behind
the row's opaque ::after layer. Move the nav, and anchor + padding + slide-behind all have to move coherently..header-sticky{position:sticky}); on-scroll-up pins via
body.header-pinned with a 200px scroll-accumulation threshold.header.js publishes --header-height, --header-navigation-height,
--header-group-height, --header-offset-top; the menu drawer and search publish/consume
--header-bottom-position. header.js crashes if .header__bottom is removed from the DOM — it must stay present.Add a fourth header_layout option — logo-left-menu-inline — plus a master checkbox
rs_enable_compact_single_row. All new code paths are dead unless that layout + checkbox are active. The stock three layouts
are not edited. Nav renders inline in the top row inside its existing .header__bottom wrapper (kept for the JS contract,
made position:static so panels anchor to the full-width .header__top instead). ~40 lines of scoped CSS live in
rs-soft-modern.css (the RevShift layer), not in Hyper's files.
Route B (fully custom section) was independently examined and rejected by both reviews: it must clone the entire
~100KB schema/block contract, header.js hard-codes document.querySelector('.header-section'), and every Hyper
update becomes an untracked interface. It buys no visual ceiling Route A can't reach.
| Topic | Claude | Codex | Resolution |
|---|---|---|---|
| Search in the row | Icon → existing full-width overlay | Persistent compact field (140–320px), zero new JS/ARIA | Sean's call — Codex's is lower-risk v1; icon-expander is a clean v1.1 if the field feels busy |
| Nav row element | Empty stub div (crash guard) | Nested .header__bottom--rs-inline, static, inside top row |
Codex's — keeps every JS hook on the real nav; one menu render |
| Panel offset | Re-anchor top:100% | Same + zero out the measured padding or the offset doubles | Codex caught the padding — both fixes ship together |
| Collapse-on-scroll | Disable in compact layout | Keep, restyled as fade (translate would push nav into topbar) | Ship Codex's CSS, but activate with collapse OFF — single row has little to collapse; setting still works if ever wanted |
| Master toggle | Flip layout dropdown back | Checkbox that maps the layout back to stock while keeping compact settings stored | Codex's — one-checkbox revert, nothing lost |
| FR/width safety | Auto-fallback to two-row below ~1200px | Hard design gate: stop for approval if EN/FR menu can't fit at 1024px | Gate first (no silent degradation); fallback kept as a named option if the gate fails |
rs-section-nav (live on PDPs) and
rs-brand-pills compute their sticky offset as
--header-height − --header-navigation-height — they assume the collapsed header height. In the compact
layout the nested nav makes --header-navigation-height ≈ the row's content height, which would stick them
under the header. Fix is one compact-scoped override for each (2 files), or letting them read
--header-height alone when the compact class is present. Cheap — but only because it was found now, not in QA.
Also confirmed: search.js consumes --header-bottom-position; unchanged by this design since search
stays inside .header__top.
rs_enable_compact_single_row in the theme editor → Liquid maps the layout
back to logo-left-search-center and renders the untouched stock branch. No deploy, no data loss, compact settings
stay stored. QA for the revert = DOM + screenshot match against the pre-change baseline, not "looks like two rows".backups/2026-07-XX-compact-header-prechange/ in the repo (outside
theme/, never deployed): verbatim copies of the three touched files + MANIFEST.md (theme version, reason,
restore steps) + SHA256SUMS. Survives Hyper updates, a B2C pivot, anything. Git history is the third layer, not the
client-facing backup.Files touched, total: sections/header.liquid (guarded branches + schema),
assets/rs-soft-modern.css (one dated block), sections/header-group.json (activation only, after QA),
plus the two RS component offset overrides. Hyper's theme.css, header.js and all menu/drawer/search
snippets stay byte-identical.
| Risk | Sev | Mitigation |
|---|---|---|
| Mega panel inherits the nav cell width instead of full row | Critical | Nav wrapper position:static; .header__top is the positioned ancestor; assert panel rect vs baseline at 4 widths |
| Double/missing panel offset (anchor + legacy padding) | Critical | top:100% + zero the --header-navigation-height padding, compact scope only; nested dropdowns untouched |
| header.js crash / height vars misreport | High | .header__bottom stays in DOM; log all 5 vars before/after; RS component overrides shipped in the same step |
| EN/FR menu doesn't fit at 1024px | High | no-wrap + minmax grid + 140px search floor; hard stop for design approval, never truncate |
| Hyper update collision | Med | Additive dated branches, CSS in RevShift file, cold backup + manifest, re-verify on every update |
::after suppression.header-group.json off-hours, re-run the QA matrix live, then prove the revert by toggling off/on once in preview.