Hamburger Menus on a Desktop Screen

A small icon in a large corner

Open the site on a desktop monitor. A full-screen photograph, a short slogan, a logo, and in the top right corner, three short horizontal lines.

Those lines are the menu, usually called a hamburger icon. Behind them sit all the pages: services, prices, past work, about, contact.

On a phone, hiding the menu makes sense, since five links will not fit across a narrow screen. On a desktop there is room for all of them, and they are hidden anyway.

It usually happens because the site was designed for phones first and the desktop version was never reconsidered, or because an empty header looked cleaner in the design presentation.

What the hidden menu costs

• Visitors cannot see what you offer without clicking first.
• Every page needs an extra click to reach.
• Some visitors do not recognise the icon at all.
• The icon sits far from where eyes land on a wide screen.
• The menu stops showing which page the visitor is on.

The first is the costliest. A visible menu is a summary of the business, five words that tell a visitor what you do before they read anything else. Hidden, it says nothing.

Out of sight, out of mind

People choose from what they can see. A visitor scanning a page decides where to go next from the links in view, and links behind an icon are not in view.

A visible menu also answers questions nobody asked aloud. A link reading Prices tells a visitor there are prices, which may be what keeps them on the site.

Behind an icon, the same link answers nothing until someone thinks to open the menu, and plenty of visitors never do.

Not everyone knows the icon

The three lines are familiar to anyone who uses a phone all day. They are less familiar to a visitor at an office computer who rarely browses on a phone.

On a desktop the icon often appears without a label, small and far from the content, which makes it easy to miss even for people who know it.

Adding the word Menu beside the icon helps on phones. On a wide screen, the better answer is not to need the icon.

Show the main links when they fit

The fix is a header that changes with the screen: visible links across the top on wider screens, collapsing into the icon only when they no longer fit.

The point to switch is decided by the links, not by the device. If five links fit across a tablet held sideways, show them there too.

Test it by narrowing a desktop browser window slowly. The links should stay on one line until the moment the icon takes over, never wrapping onto two.

Keep the phone number visible in the header at every size, as text that can be tapped on a phone.

And make the icon a proper button with a label, so keyboard and screen reader users can open it. Many icon menus are built in ways neither can use.

Keep the menu short

A visible menu forces a decision a hidden one avoids: what actually goes in it.

Five or six top-level links fit most headers and are easy to scan. Fourteen do not fit, and hiding them behind an icon was partly a way of not choosing.

Group the rest. Individual services can live on a services page; staff, history and community work under about; the blog, careers and policies in the footer.

Or a drop-down can hold that second level, such as individual services under Services, provided each top-level word makes sense on its own.

Name each link with the word a customer would use, such as Prices rather than Investment.

A worked example

A small architecture practice in Vancouver had a site that opened on a full-screen photograph of a finished house, the practice's name, and a hamburger icon.

Behind the icon were fourteen links, among them laneway houses, additions, heritage renovations, process and fees, and a page of awards.

Homeowners arriving with a laneway house in mind saw a striking photograph of something else, and no sign the practice designed what they wanted.

The redesign put five links across the header on wide screens: Homes, Laneway houses, Renovations, Process and fees, and Contact.

Awards and press moved to the about page. The phone number and email went into the header as text, and the icon, labelled Menu, appeared only on phones.

The photograph stayed. It now sat beneath a header that said what the practice does.

Check what the menu is doing

With a little setup, Analytics can record each click on the menu icon and on the links inside it.

If the icon is rarely clicked on desktop, the pages behind it are effectively missing for most visitors.

Look also at which pages people reach. Important pages with almost no visits, such as prices or service areas, are often the ones buried in the menu.

What the header should hold

On a desktop screen, a good header holds four things: the logo, the main links, a phone number, and at most one button for the main action.

That is enough to tell a visitor what the business does and how to reach it, before they scroll.

Anything more starts to crowd it, and the temptation returns to hide everything behind an icon.

The counter-case

Some sites can reasonably keep the icon on larger screens.

A one-page site for an event has little to hide. A portfolio meant to be browsed like a book may choose the icon deliberately, accepting the cost.

And a site visited almost entirely from phones, through ads aimed at phone users, gains less from fixing the desktop view first.

For a business with several services and visitors on every kind of screen, show the main links wherever they fit, and keep the list short.

The order to do it in

1. Open your site on a desktop screen.
2. Count the links behind the icon.
3. Choose five or six for the top level.
4. Move the rest into pages or the footer.
5. Show those links wherever they fit.
6. Label the icon Menu on phones.
7. Keep the phone number visible at every size.

Step three is the hard one and the one that matters, because a short menu is what makes a visible menu possible.

Another design choice that looks better in a presentation than in use is covered in parallax scrolling that hides the point.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.