How to add Beautiful Pro’s mobile responsive menu in other Genesis themes

This is an update to my earlier article titled How to make Header menu in Genesis mobile responsive similar to that in Beautiful Pro. The earlier article worked with Beautiful Pro version 1.0.1. This tutorial is for the current latest v1.1.

Below are screenshots showing the result of applying the steps in Genesis Sample.

beautiful-pro-mobile-menu-closed

beautiful-pro-mobile-menu-open

beautiful-pro-mobile-menu-open2

Step 1

Upload beautiful-pro/js/responsive-menu.js (mirror) to {child theme directory}/js (create 'js' if not existing).

Ex.: wp-content/themes/genesis-sample/js/responsive-menu.js

Step 2

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.