Slide in-out Responsive Menu forever in Genesis Sample 3.0.0

This tutorial provides the steps to create a slide in-out Responsive Menu forever in Genesis Sample 3.0.0+ This is an upgraded version based on Slide in-out Responsive Menu forever in Genesis Sample.

You can add background colors, Image and Custom content including Social widgets in this Menu.

It is recommended to read the older version of the tutorial to have a better understanding of the new version.

Prerequisite:

1. Let’s first enable the default responsive menu for all devices. Follow Responsive menu forever in the Genesis Sample. Genesis Sample 3.1.0 line 1483 - 1550.
2. Follow Add js and no-js class to body in Genesis.

STEP 1

Remove the default responsive-menus.min.js file with a new one. (It enqueue from framework now)

Open child-theme/functions.php and remove this code

// Registers the responsive menus.
if ( function_exists( 'genesis_register_responsive_menus' ) ) {
    genesis_register_responsive_menus( genesis_get_config( 'responsive-menus' ) );
}

STEP 2

Create a file responsive-menus.js under /js/ folder(create one) of /child-theme/ and add the following code.