Build log
Mobile navigation: fixing the menu that disappeared after page changes
A small mobile-menu failure exposed a larger lesson about client navigation, replaced DOM and resilient event binding.
Source: Public ChaseInTech mobile route and production browser regression evidence
Technical bibliography record
The build, in five parts.
- 01 Built
- A mobile menu that survives Astro client navigation, resets state correctly and retains bounded, reduced-motion-safe interaction feedback.
- 02 Process
- The production failure was reproduced across a page transition, traced to a listener bound to a retired header node and repaired through current-document event delegation.
- 03 Learned
- In a client-navigated site, binding to the first DOM node is not the same as binding to the interface contract.
- 04 Skills
- Astro transitionsevent delegationmobile motionaccessibilityproduction diagnosis
- 05 Saved
- Before/after state captures, 36 browser checks, 13-route mobile overflow coverage and the production deployment proof.
Visual QA and product evidence
See the milestone, not only the summary.
The failure#
The menu could open and close on one page, but became inert after Astro replaced the header during navigation. The click handler remained attached to the retired element, so the visible control no longer owned its behavior.
The repair#
Actions moved to document-level delegation, page-load state now reinitialises against the current header, and the mobile panel gained contained scrolling, a clear close state, touch feedback and reduced-motion handling.
Production proof#
The 50-page build, two focused regressions, the 36-test Chromium suite and live mobile readback passed on 8 August.