In this tutorial I share the details of how a custom menu placed in Header Right widget area of Genesis can be converted to a hamburger menu icon at a specific width (768px) - which when tapped will reveal the vertically arranged menu items from the left screen edge. Also you can see Headroom being used to gently slide away the Header as the user scrolls down and slide it down from the top as the user begins to scroll up.
Screencast (no voice):
The code in this tutorial has been written with Genesis Sample as the active child theme. If you are using another theme, you may need to adjust the CSS and other steps as needed.
Download mmenu and extract the contents.
a) Upload jquery.mmenu.min.all.js to wp-content/themes/
c) Create a file named responsive-menu.js in the same location having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.