Why Your Mobile Navigation Is Probably Broken (And How We Fixed Ours)

Over 60% of web traffic is mobile. Yet most B2B and startup websites treat mobile navigation as an afterthought — a resized desktop menu jammed into a slide-out panel. We were guilty of the same mistake.

This post walks through the exact bug we shipped, why it mattered, and the principles behind the fix. If you run a website, there's a good chance you have a version of this same problem.

The Bug: A Transparent Menu Nobody Could Read

Our burger menu had three compounding issues:

1. Wrong background color for the context

The mobile drawer used bg-background — our light theme color (#FAFAFA, near-white). Our site is dark-themed: the navbar is bg-primary (#18181B). When the menu opened, it crashed into the dark context with a jarring white panel. On pages with dark hero sections, the page content would visually bleed through the light background, making link text unreadable.

2. Stacking context conflict

The drawer had z-30 while the parent <header> had z-40. In certain scroll states, the header's backdrop-blur could overlay the top of the open drawer. z-index bugs like this are subtle — they don't break anything outright, but they create visual artefacts that erode trust.

3. Zero transition feedback

The menu appeared and disappeared instantly. No slide, no fade. On mobile, instant transitions feel like glitches. The brain needs motion to understand spatial relationships — "this panel came from the right" tells the user where to look to dismiss it.

Why This Matters for Conversion

A broken mobile nav doesn't just look bad — it has real business consequences:

Visitors can't navigate → they bounce. Mobile bounce rates on sites with poor navigation are 20-30% higher than desktop equivalents.
Trust erodes immediately → a broken menu on first load signals "this team doesn't test on mobile." For a B2B consulting firm, that's a credibility hit before you've said a word.
CTAs are hidden → if the "Book a Call" button is in a menu nobody can read, that conversion never happens.

The Redesign: Five Principles

1. Match the environment

The drawer now uses bg-primary — the same dark color as the navbar. No jarring transition between dark header and light menu. It's one continuous surface that slides out, not a foreign element that appears.

2. Slide from the right, not from nowhere

The panel slides in from the right edge with a CSS transform (translate-x-0 / translate-x-full). This is the mobile OS convention — drawers come from edges. Users understand it instantly without thinking. The backdrop dims the page content with bg-black/60 backdrop-blur-sm, reinforcing "you're in a modal context now."

3. Icon + label pairs reduce cognitive load

Each nav link now shows a small icon alongside the label. Icons serve as visual anchors — even on a quick scan, the brain registers meaning before it reads the word. Sparkles → Services. HelpCircle → How It Works. Layers → Showcase. This also makes the list scannable on small screens without needing to read every word.

4. Pin the CTA

The "Book a Call" button is pinned to the bottom of the drawer and never scrolls off screen, even if more nav items are added later. This is the most important action on the entire site — it should never be buried.

5. Accessibility is not optional

Escape key closes the menu — required by WCAG for all modal dialogs
Focus is trapped — when the menu opens, the first link receives focus. Screen readers and keyboard users can navigate the menu without being stranded in the page below
aria-expanded, aria-modal, role="dialog" — all present, so assistive technology announces the state correctly
pointer-events-none on the hidden state — prevents invisible elements from blocking clicks

The Result

A dark, full-height drawer that slides in from the right, with clear white-on-dark text, icon anchors, a visible language switcher, and a persistent "Book a Call" CTA. It matches the site's visual identity and follows mobile OS conventions that every smartphone user already knows.

The total change: ~90 lines of refactored JSX and one new CSS transition. The impact: every mobile visitor can now actually use the site.

If your site has a similar issue — or you'd like us to audit your mobile UX — get in touch. A 30-minute call is free and you'll leave with at least one actionable fix.