App-like off-canvas menu using mmenu + Hide header until it’s needed using Headroom in Genesis

A couple of users in the Dynamik Facebook group wanted my take on using mmenu and Headroom jQuery scripts.

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.

Screenshot:

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.

Step 1

Download mmenu and extract the contents.

JS Files

a) Upload jquery.mmenu.min.all.js to wp-content/themes//js. Ex.: wp-content/themes/genesis-sample/js/jquery.mmenu.min.all.js.

b) Upload headroom.min.js and jQuery.headroom.min.js to the same location.

c) Create a file named responsive-menu.js in the same location having the following: