Reevaluate mobile menu positioning when custom logo set

[nickcernis]

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]

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]

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]

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

[waybis]

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.