The mobile menu button now works reliably on phones — including iPhone

The menu button on phones (the small icon in the top corner that opens the site’s navigation) has been unreliable for a while — sometimes hard to find, sometimes not showing up at all depending on your phone and browser. That’s now fixed and confirmed working on a real iPhone, not just in testing tools.

What changed

• The menu button now reliably shows up on real phones, not just in browser testing tools that simulate a phone screen. The two didn’t always agree, which is exactly why this took a few passes to fully track down.
• It now sits at a consistent height next to the Contact and Donate buttons, instead of drifting out of alignment.
• It has its own distinct look (a deep purple, rounded on all sides) so it’s easy to spot as its own tappable control rather than blending into the navigation bar around it.
• The menu that drops down when you tap it now spans the full width of the screen, and highlights whichever page you’re currently on in that same color.
• The site logo in the top-left corner is a little bigger on phones and tablets too.

Why it mattered

A lot of people visiting the site — including many members of the fellowship — do so from a phone, and the menu button is how they get anywhere else on the site. When it wasn’t showing up reliably, it meant real people couldn’t navigate on mobile at all in some cases. This was the top priority fix this round.

What’s still being worked on

The button itself is solid — the menu it opens still needed more work to actually scroll properly. See the follow-up entry, “The mobile menu now scrolls properly to reach every page”.