Mobile menu not full screen

Why it matters

A short menu with the page visible underneath is restless on a phone. A swipe moves the page instead of the menu, a tap lands on the page, and links at the bottom stay out of reach. Long submenus that open by default push the main items away.

How Snaglist checks it

With the menu open Snaglist measures the panel: does it run from below the header to the bottom of the screen, what is at the bottom of the screen, does the page move when you swipe over the menu, can every link be reached (in view or by scrolling inside the menu), and is the page wider than the screen. The detail says what it measured and the screenshot shows the open menu.

Common causes

• A dropdown that is as long as its links, with the page visible underneath
• A panel with a maximum height and its own scroll inside a page that also scrolls
• Body scroll not locked while the menu is open
• Submenus that are open by default
• A panel with overflow hidden that cuts off the last links

How to fix it

1. Make the open menu a fixed panel from below the header to the bottom of the screen.
2. Give it its own scroll when it is longer than the screen.
3. Lock the page underneath while the menu is open.
4. Collapse long submenus, so the main items stay at the top.
5. Check the page again after the next crawl.