Hamburger menu not working on mobile: find it

A mobile menu depends on three things working in order: the tap reaches the icon, the script changes the menu's state, and the panel that state controls is on screen and clickable. The tap can miss a small icon. The script can listen for hover, or fail before it attaches. The panel can open off screen, or a layer behind it can take every tap meant for the links. From the visitor's side all three look the same: they press the icon and nothing happens. The owner usually tests in a wide browser window, where the menu may not be a hamburger at all.

• Tap the icon and watch the page. Does it react, or jump to the top of the page?
• Tap the icon with the Elements panel open. Does a class or attribute on the menu change?
• Tap the four corners of the icon button at phone width, not just the middle.
• Tap a link in the open menu. Does the page move, or does a banner or header take the tap?
• Open the Console and tap the icon. A red error at that moment means the handler never attached.

Start with the tap and watch three things. First, does the page react at all? A page that jumps to the top has a link with an empty address, a hash, that the script never stopped, so the tap did something, just not the thing you wanted. Second, does the menu's state change? In the Elements panel, watch the element that holds the menu while you tap, and look for a class or attribute that appears or flips. Third, is the panel visible? A state that changes without a visible panel points to layout, not to the handler.

Menus written for a mouse often open on hover, with a mouseenter listener on the icon. A phone has no hover, so the menu never opens, and a visitor who taps sees nothing. Check the handler by reading the script, or by tapping the icon with the Console open. A script error on load means the handler never attached, and the icon does nothing at any width.

The icon is often a small glyph, a few lines or a single icon character, and the click area is only the glyph's own box. A finger covers a wide patch, so a tap that looks centered can land beside the element. Test by tapping the four corners of the button at phone width, not the middle. If only the middle responds, enlarge the element that holds the click, not the glyph, so the padding around the icon is part of the tappable area.

An open menu can be off screen. Panels often slide in from the side with a transform, and if the open class does not reset the position, the panel waits outside the screen edge. The other fault is a panel that is on screen while a sticky header, a banner or a page wrapper sits above it, so taps on the links go to that layer. In the Console, run document.elementFromPoint at a link's position: it returns the covering element if one exists. The simulated visitor's report shows the link that failed, with a screenshot.

Test website before launch

A new sticky header, a chat bubble or a script that locks scrolling can break the menu in the next release without touching the menu code. Rerun the same simulated visitor after each change, on a phone-sized browser, and try the links in the open menu. If the site sits behind a login, test with a test account, and check each preview deploy before it reaches the live site.