WordPress Menu Button on Mobile

A quick note regarding WordPress and its Menu button on mobile devices (mobile Safari for sure, others possibly). I’ve been trying to update this site a little and added a Books page to highlight the book I’m currently reading, along with books I’ve read over the last year. I decided to track the books using Pinterest and figured out how to post a Pin and a Board on a page. I decided I should check my handy work on my iPhone and quickly realized the “Menu” button didn’t work. Hmm…

As it turns out, WordPress updated the CSS tag used for the Menu button in their Twenty Twelve theme’s header.php file. So, if you have a child theme like I do and didn’t know about this update, your Menu button is no longer working.

Fortunately, it’s a very quick fix. Open the header.php in your child theme folder and replace the following line of code:

 <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>

with:

 <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>

The navigation.js file was (also) updated to look for this new tag, which is why <h3> doesn’t work anymore. That’s it, all should be working again.

One thought on “WordPress Menu Button on Mobile

  1. Neil Maybin

    A million thanks. You, sir, are a Hero. The web is full of red herrings on this topic, but no one has even thought to categorise it as a simple bug, let alone identify it for the simply solved problem that it is. Please accept my enormous gratitude for finding and publishing this simple fix.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.