Mobile menus that hide your homepage's next step

Key takeaways

On phones, the mobile menu often hides the one thing visitors need: the call to action. Keep the main action visible outside the hamburger, as a header button, tappable phone icon or slim sticky bar, and put the action at the top of the open menu too. Nielsen Norman Group has found hidden navigation is used less than visible navigation.

• Keep the main action outside the hamburger menu.
• Use a header button, phone icon or slim sticky bar.
• Put the action at the top of the open menu too.
• Make sure nothing covers the action, such as chat bubbles.

Why does the mobile menu hide the next step?

On a phone, the main navigation usually collapses into a menu icon, and 'Contact' or 'Get a quote' goes with it. Visitors who want to act must open the menu, scan a list and find the right item. Nielsen Norman Group found people use hidden navigation less often than visible navigation, and the same applies to hidden actions.

• Why your homepage is not converting visitors into customers
• One primary call to action on your homepage

How do you keep the action visible on mobile?

Use one of these, matched to your main action.

• A small header button beside the menu icon: 'Quote' or 'Book'.
• A tappable phone icon in the header for call-led businesses.
• A slim sticky bar at the bottom with the main action.

• The header CTA button: one action that stands apart
• Sticky call-to-action bars on mobile: when they work
• Click-to-call: turn mobile visitors into phone calls

What should the open menu show?

When the menu opens, put the main action at the top as a button, followed by the most-used pages and contact details. Keep the list short and labels clear. If visitors have opened the menu to find a way to contact you, they should not have to scroll for it.

• Menu labels: words visitors understand at a glance
• Homepage to service page: the click that matters most

What covers the action on mobile?

Chat bubbles, cookie banners, WhatsApp buttons and sticky offer bars can all sit on top of the main action or each other on a small screen. Check the bottom corners of the screen on several phones and make sure only one floating element remains.

• Cookie banners and chat widgets that cover your menu
• Is your homepage broken on someone else's phone?

When is a hamburger menu fine?

A menu icon is a normal pattern on mobile and is fine for secondary pages. The problem is only when the main action lives exclusively inside it. On desktop, where there is room, show the main links openly.

• Homepage design trends that cost enquiries

What does this look like in practice?

A pattern we see: a trades site where 'Call now' exists only inside the mobile menu and a chat bubble covers the footer phone number. Adding a phone icon beside the menu and removing the chat bubble on mobile often brings calls back from phone visitors the same week.

• See client work
• Website Design & Development for UK businesses

Mobile menu checklist

• Check the main action is visible without opening the menu.
• Add a header button, phone icon or sticky bar.
• Put the main action at the top of the open menu.
• Keep menu labels short and clear.
• Remove overlapping floating elements.

• Should the mobile homepage show less than desktop?
• Check your homepage's performance in GA4

Next step

Open your homepage on a phone and try to get in touch without touching the menu icon. If you cannot do it in one tap from the first screen, fix the header.