Reevaluate mobile menu positioning when custom logo set

studiopress / genesis-sample

This is the sample theme created for the Genesis Framework.

https://demo.studiopress.com/genesis-sample/

530 stars 283 forks source link

Reevaluate mobile menu positioning when custom logo set #332

Open nickcernis opened 4 years ago

nickcernis commented 4 years ago

We had a report that the mobile menu is pushed below the 720 x 120 custom logo at mobile screen widths (see below).

The menu opening animation is also not smooth when it appears like this (the menu scrolls open, then jumps below the menu button). We should consider:

centering/left-aligning the menu, or trying to improve the position
re-evaluating the menu animation at small widths

waybis commented 4 years ago

I would agree with this, such a small item takes up a lot of real estate on a mobile, significantly reducing the amount of content above the fold. I would also argue to remove the 'Menu' text to reduce the width, most websites seem to be using the hamburger button on it's own anyway.

markdeafmcguire commented 4 years ago

I would also argue to remove the 'Menu' text to reduce the width, most websites seem to be using the hamburger button on its own anyway.

I'm not an expert but I do caution against making such an assumption for accessibility purposes. It is certainly possible that a significant portion of users (if not all of them) understand what a hamburger menu is for.

Perhaps a Customizer checkbox option that would allow the appropriate decision-makers to disable/enable the menu text feature based on accessibility compliance guidelines and user feedback?

It would be a similar feature that I would like to see for disabling/enabling the sticky header, again for the same reason previously mentioned.

waybis commented 4 years ago

wordpress.org uses hamburger button only, but not sure whether it is accessible, will take a closer look.

waybis commented 4 years ago

The wordpress.org mobile-menu-button element includes

<button id="mobile-menu-button" aria-expanded="false"><span class="screen-reader-text">Toggle Menu</span></button>

The text is hidden visually using the screen-reader-class, however the Genesis Sample menu-toggle element includes:

<button class="menu-toggle dashicons-before dashicons-menu" aria-expanded="false" aria-pressed="false" id="genesis-mobile-nav-primary">Menu</button>

without the screen-reader-text class.

There maybe other considerations for accessibility but that's the only obvious one I could find looking briefly at wordpress.org.