Mobile menu design: which links should stay visible?
A logo, six navigation links, search, language selection and an enquiry button can crowd a phone screen. Making every label smaller is not a complete solution. Plan the visitor’s main task, persistent controls and expanded menu as parts of the same mobile experience.
Define the job of the visible header
A visitor to an illustrative maintenance company may want to find a service or call the business. A logo, menu control and primary contact route can be a starting point. Other priorities depend on actual visitor questions; the example does not prescribe an identical set of buttons for every sector.
Write down two tasks that should be discoverable at first glance. Discuss which control supports each task with your agency. Include decorative controls in that review: an attractive button still occupies space that could support something the visitor needs.
Separate navigation from expansion
If “Services” opens a page, an adjacent arrow may have a different job: revealing its subsections. People should not have to guess whether a tap will navigate or expand. The W3C menu tutorial demonstrates a separate toggle button when the parent link needs to retain its own function.
Check access by keyboard and whether open and closed states are understandable. An interaction that only works on mouse hover does not supply the equivalent phone behaviour. Keep navigation labels consistent with the page titles they lead to, so visitors can recognise that their selection worked.
Design the whole search interaction
When search opens, draw the result panel as well as the expanding input. If the page includes a fixed offer bar, results must not sit underneath it. Keep the close control visible and provide a sensible focus return when search closes.
Test with the phone’s onscreen keyboard open. Can the result list scroll? Does selecting a result open the expected content? Is there useful guidance when nothing matches? If search is not implemented, do not add a decorative field that looks like a working search tool.
Measure fixed bars together with the content
Do not approve header height in isolation. Navigation, campaign bars and the browser interface together can occupy much of the first screen. Check where the page heading and introductory sentence actually begin. Try long Turkish and English labels and repeat the check in landscape orientation.
Record the screen width, open layer and obscured element. “The first search result sits under the offer bar” gives the team a specific condition to fix. “Mobile is broken” does not explain which interaction or combination of layers caused the problem.
Use five short actions at handover
Open the menu, enter a subsection, find a page through search, change language, then close the menu and continue reading. Note accidental taps on neighbouring controls. Repeat the sequence on a service page and an article, rather than checking only the homepage.
For the separate task of handling enquiries, see our website form guide. Explore our web design service when navigation and content need to be planned together. The goal is to make the right destination easy to reach, rather than fitting the largest possible number of controls into the header.
Frequently asked questions
Must every desktop link stay visible on mobile?
No. Important routes should be easy to discover, while other destinations remain available through an understandable menu structure.
Can the mobile menu be animated?
Yes. Opening and closing should stay clear, movement should not delay reading or tapping, and reduced-motion preferences should be considered.