Why Does My Mobile Menu Keep Breaking?

A broken mobile menu is one of the fastest ways to lose a visitor. If someone taps the hamburger icon and nothing happens, or the menu opens but they can't close it, they leave. The good news: most mobile menu failures come from a handful of fixable causes — and you can diagnose them yourself in a few minutes.

Here's how to figure out what's actually wrong, then fix it.

Start by reproducing the problem on a real phone

Desktop browser emulators lie. They don't replicate touch events, real viewport quirks, or how a sticky header behaves when the on-screen keyboard appears. Before you change any code, open your site on an actual phone — ideally a mid-range Android and an iPhone — and try to use the menu the way a customer would.

Ask yourself:

• Does the hamburger icon respond to a tap on the first try?
• Does the menu open fully, or does it get cut off?
• Can you close it without reloading the page?
• Does it stay usable after you scroll?
• Does it work in both portrait and landscape?

Write down exactly which step fails. That symptom points to the cause.

Cause 1: tap targets that are too small or too close together

This is the most common culprit. A menu link that looks fine on a desktop monitor can be a frustrating miss on a phone. If the tappable area is smaller than the visible text, users tap the gap between links and nothing happens.

The fix:

• Give every menu link a minimum touch area of roughly 44 by 44 pixels (Apple's Human Interface Guidelines) or 48 by 48 density-independent pixels (Google's Material guidance).
• Add padding to the link itself, not just margin around it — margin isn't tappable.
• Space adjacent links so a slightly off-center tap still lands on the intended item.
• Check icon-only buttons (close, back, search) — these are frequently undersized.

In your browser's developer tools, inspect the link and look at the box model. If the content box is small and the padding is thin, that's your problem.

Cause 2: something invisible is sitting on top of the menu

If taps register everywhere except the menu, an overlay is probably intercepting them. Common offenders:

• A cookie banner or chat widget with a transparent container that spans the full screen.
• A sticky header with a high z-index that overlaps the menu panel.
• A modal or lightbox that was closed visually but not removed from the DOM.

The fix: open dev tools, use the element picker, and click where the menu should be. If the highlighted element isn't the menu link, you've found the blocker. Adjust the z-index stacking order so the open menu sits above everything else, and make sure hidden overlays are actually removed or set to display: none.

Cause 3: the menu doesn't respond after scrolling

A menu that works at the top of the page but breaks once you scroll usually points to a sticky header issue. Two things tend to go wrong:

1. The header is fixed, but the menu panel is positioned relative to the document — so it opens somewhere off-screen.
2. A scroll-triggered script hides the header, and the menu toggle loses its click handler.

The fix: make sure the menu panel is positioned relative to the same containing element as the toggle button. If you use a sticky header, test opening the menu after scrolling to the bottom of a long page, not just at the top.

Cause 4: the menu opens but won't close

This is almost always a JavaScript event problem. Either the close button's handler isn't attached, or the open action added a class that the close action doesn't remove.

The fix:

• Confirm the close button has its own event listener — don't assume the same toggle handles both states.
• Check that opening the menu doesn't disable scrolling on the body in a way that also blocks the close button.
• Test tapping outside the menu — many users expect that to close it.
• Make sure the Escape key and the browser back button both dismiss the menu gracefully.

Cause 5: the menu is technically working but feels broken

Sometimes the code is fine and the experience still fails. Watch for these:

• Layout shift when the menu opens — the page jumps because the menu pushes content instead of overlaying it. Reserve the space or use a fixed overlay.
• Tiny text — if users have to pinch-zoom to read menu items, the menu is failing even if it opens. Keep menu text at least as large as your body text.
• No visual feedback on tap — without a pressed state, users tap twice and trigger two actions. Add a subtle active state.
• Slow animation — a menu that takes a full second to slide in feels broken. Keep transitions short.

A quick pre-launch check for your mobile menu

Before you ship any change to your header or navigation, run through this list on a real device:

• Tap every menu item and confirm it goes to the right page.
• Open and close the menu five times in a row without reloading.
• Scroll to the middle of a long page, then open the menu.
• Rotate the phone while the menu is open.
• Test with a slow connection to see if the menu appears before or after the rest of the page.
• Check that the menu is reachable with a screen reader and keyboard.

If any of these fail, you've found your bug.

When to test with a tool instead of by hand

Manual testing catches most issues, but some problems — like a menu that only breaks at a specific viewport width, or a tap target that's technically large enough but overlapped by another element — are hard to spot by eye. Running a free website audit can surface mobile UX and layout issues you'd otherwise miss, including problems that only appear on smaller screens.

Mobile menus break for boring reasons: small tap targets, overlapping elements, and event handlers that don't fire. None of them are hard to fix once you know which one you're dealing with. Test on a real phone, reproduce the exact failure, and work backward from the symptom. For more checklists and diagnostic guides, browse the guides library.

More guides · Compare audit tools · Run a free website audit