Mobile Navigation Mistakes That Cost You Customers

Design & Tech Guide · 9 min read · Published 29 October 2026

Mobile navigation is how visitors move around your site on a phone, and when it is awkward they leave rather than struggle. For most small businesses the menu is the route to an enquiry, so a menu that hides your contact options or is hard to tap costs you customers quietly.

This guide gives you a five-minute phone test, seven common mistakes with fixes for WordPress, page-builder and custom sites, and a 14-day plan. The standard we work towards is simple: a visitor can reach your contact action in three taps or fewer. If you want an expert to check it, our website audit includes mobile usability.

The five-minute phone test

A desktop browser squeezed to a narrow window is not a phone, so use the device your customers use, on mobile data.

Write down every check that fails. Those are your fix list, and the sections below show how to solve each one.

Seven mobile navigation mistakes and how to fix them

1. Tap targets too small or too close

What it looks like: You hit the wrong link, or have to zoom in to tap anything.

Why it costs enquiries: Mistaps frustrate people, and some will give up before reaching the page they wanted.

How to fix it:

• The WCAG 2.2 minimum target size is 24 by 24 CSS pixels, and Apple and Google suggest around 44 to 48 pixels for comfortable touch. Aim for the larger figure for menu links and buttons.
• In WordPress and most builders, increase menu link padding in the menu or header settings. On custom sites, a rule such as .menu a {{ display: block; min-height: 48px; padding: 12px 16px; }} does it.
• Leave space between items so a thumb can’t catch two. Our accessibility guide covers sizing and readability in more depth.

2. Menus that only work on hover

What it looks like: A dropdown opens on a computer, but nothing happens when you tap the parent item on a phone.

Why it costs enquiries: Phones have no hover, so visitors can’t reach the pages inside the dropdown.

How to fix it:

• Make submenus open on tap, and keep the parent link working as a link or as a clear expand control.
• Use hover styles only where a mouse exists, for example inside @media (hover: hover) on custom sites.
• On builders, switch the mobile menu type to a tap-to-open accordion.

3. Too many items and deep submenus

What it looks like: A long list of top-level items, or menus nested three levels deep.

Why it costs enquiries: Visitors scan a few items quickly; a long list makes them hunt and guess.

How to fix it:

• Keep the main menu to the pages visitors actually use, often five to seven. See tracking website performance to find which pages those are.
• Group rarer pages under one item, or move them to the footer.
• Flatten submenus to two levels at most.

4. A hamburger menu hiding your main action

What it looks like: The only way to reach your contact page is to open the menu first.

Why it costs enquiries: People who already want to call or message you shouldn’t have to search for how. This is common when visitors arrive from a listing such as your Google Business Profile.

How to fix it:

• Keep a visible Call, WhatsApp or Get a quote button in the header or at the bottom of the screen.
• Treat the menu as the place for everything else, not for your main goal.

5. A header that eats the screen

What it looks like: A tall sticky header plus a banner leaves little room for content, especially in landscape.

Why it costs enquiries: Visitors see a strip of page instead of your message, and the content feels cramped.

How to fix it:

• Slim the header, shrink it on scroll and remove stacked bars or announcement strips.
• Check portrait and landscape on a real phone.

6. Contact details that aren’t tappable

What it looks like: Tapping your phone number, email or WhatsApp does nothing.

Why it costs enquiries: Visitors must copy and paste or retype your details, and many won’t.

How to fix it:

• Use proper links: <a href="tel:+15551234567"> for calls, <a href="mailto:hello@example.com"> for email and <a href="https://wa.me/15551234567"> for WhatsApp, with your own number in international format.
• Place them near the top of the page and at the end of key pages.

7. A menu that won’t close, or breaks the Back button

What it looks like: The menu stays open after you tap a link, or Back takes you out of your site.

Why it costs enquiries: Visitors feel trapped, and many leave instead of working out how to continue.

How to fix it:

• Close the menu when a link is tapped, and give the menu button an aria-expanded state so screen-reader users know whether it is open.
• Test Back on every main page, especially if your menu opens as an overlay that changes the page address.

What to fix first

Start with the changes that remove the most friction for the least effort, and retest on a phone after each one.

A 14-day plan

If pages also feel slow to load, see why websites load slowly and Core Web Vitals explained, because a laggy menu is often a speed problem.

Fix it yourself or get help?

For a diagnosis, start with a website audit. If the menu is only part of a bigger problem, our website redesign service rebuilds navigation and layout together; signs your site needs a redesign helps you decide. Take a backup before changing menus, and check every main page afterwards. Our common website mistakes guide covers other things to look for.