Ask DN: Which responsive mobile menu is best?

over 7 years ago from , Founder of http://functionandform.co.uk

I have two quick demos for a websites responsive mobile menu concept. Which one do you think is the best user experience? Or if you have a third suggestion let me know.

Concept One: http://codepen.io/toddpadwick/full/Xdgvox/ collapsed hamburger menu

PROS: header still contains logo. less distracting, and doesn't compete with mobile browser UI CONS: hides content. not everyone recognises hamburger icon. Thumb cannot reach top of screen on large phones.

Concept two: http://codepen.io/toddpadwick/full/ONqBXr/ app style sticky menu

PROS: navigation options are always visible. navigation is reachable with users thumb on large screens CONS: branding/logo is now lost and must be catered for in some other way. Navigation may be distracting as user scrolls down. Navigation may compete with mobile browser UI normally found at the bottom


  • Ale UrrutiaAle Urrutia, over 7 years ago

    I would say option two is good but just if menu items fit on the phone and readability is ok.

    1 point
  • Keir Ansell, over 7 years ago

    I had the same question as I have been working on my website I've opted for option 2 myself (having initially gone with Option 1).

    My reasons are that I personally struggle to reach the top of my phone without repositioning it in my hand (I never remember Reachability and it's another step I don't want to have to take).

    I also like having all of the links available at all times rather than hidden.

    With regards to the logo, I've incorporated mine into the header/hero section. Not visible when the user scrolls down but don't really see that being that important. Once the users on the site they'll know what it is.

    Hopefully that's of some help!

    1 point