Off-Canvas slide in-out responsive menu in Genesis

This tutorial provides the steps to create an off-canvas side slide in-out responsive menu in Genesis Sample. It is an updated version of the previous tutorial Off-Canvas side slide in-out responsive menu in Genesis Sample and not touch the default layout of the title area.

Preview:

Tested on Genesis Sample 3.0.0+

Prerequisite:

1. Install and Activate Genesis and Genesis Sample theme.
2. Assign the Primary Navigation in Apperanace > Menus.

STEP 1

A. Remove the default responsive menu. Open your child-theme/functions.php and delete the following:

    $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
    wp_enqueue_script(
        'genesis-sample-responsive-menu',
        get_stylesheet_directory_uri() . "/js/responsive-menus{$suffix}.js",
        array( 'jquery' ),
        CHILD_THEME_VERSION,
        true
    );

    wp_localize_script(
        'genesis-sample-responsive-menu',
        'genesis_responsive_menu',
        genesis_sample_responsive_menu_settings()
    );

For Genesis Sample 3.0.0+ follow Remove Responsive Menus in Genesis Sample 3.0.0+