In my Facebook group, a user asked:
Hello Sridhar,
Google just released a new design for the webmaster tools (https://www.google.nl/intl/nl/webmasters/#?modal_active=none) and I love the mobile menu. Could you make a tutorial on how to make that using your Genesis Sample Master theme?
Thanks a lot!
The redesigned Google Webmasters website shows a hamburger menu icon at smaller widths which when tapped fades in a vertical side menu with menu items one below the other and menu icon transitioning smoothly to a X icon. Tapping the X closes the nav menu overlay.
In this tutorial I share the code for setting up a similar mobile menu in Genesis.
Animated GIF:
Screencast (before I added the CTA button at the bottom):
While the tutorial has been written for Genesis Sample child theme it should work with some adjustments in any Genesis child theme.
This method does NOT take care of accessibility. For a simpler but accessible mobile navigation, follow my Accessible Responsive Menu in Genesis tutorial instead.
Note:
- This solution is tested and written only for single level menu items. The nav menu has been set to be reduced to one level depth on mobile devices.
- The mobile menu shown will be the Primary Navigation menu.
- Very minimal JS is used - only to assign a class to html element when the menu is open. Everything else is CSS.
Step 1
Ensure that a menu is assigned to Primary Navigation Menu theme location.
Step 2
Create a file named say, mobile-menu.js in child theme's js directory (create if not existing) having the following:
