Mobile Navigation: From Broken to Usable
On a phone, the menu is the website. It is how someone gets anywhere — and when it fights them, they leave. This is the story of taking a mobile navigation that did exactly that and rebuilding it into something that quietly gets out of the way.
What was wrong
The original menu had the classic mobile failings, the kind that look fine on a laptop and collapse in a real hand:
- Tap targets too small and too close. Links sat shoulder to shoulder, so the wrong one fired half the time.
- A menu that would not close. Tap a link, the panel stayed open over the page you had just asked for.
- Dropdowns a thumb could not reach. Sub-menus opened in places one-handed use simply could not get to.
The rebuild
I treated the mobile menu as its own piece of design rather than a shrunken desktop one:
- One clear control. A single hamburger that opens a full-height panel — no competing menus, no guessing.
- Thumb-first spacing. Generous tap targets with real space between them, sized for the way people actually hold a phone.
- It closes when it should. Selecting a link takes you there and dismisses the panel, every time.
- Accessible by default. Keyboard reachable, screen-reader labelled, focus handled properly — built to WCAG 2.2 AA rather than bolted on afterwards.
The outcome
The result is unremarkable in the best possible way: the menu opens, you find what you want, you tap it, and it takes you there. Usable, predictable, and the same logic whether you are on a phone, a tablet or a desktop.
