Modular Genesis Responsive Menu

functions.php

// Genesis Default Responsive Menu
include_once( get_stylesheet_directory() . '/lib/responsive-menu.php' );

responsive-menu.css

/* # Responsive Menu
---------------------------------------------------------------------------------------------------- */


@media only screen and (max-width: 1023px) {

	.js .genesis-nav-menu .sub-menu a,
	.js .genesis-nav-menu .sub-menu {
		width: 100%;
	}


	.js nav.nav-primary,
	.js .site-header nav  {
		display: none;
		position: relative;
	}

	.js .site-header nav .wrap {
		padding: 0;
	}

	.js nav.pagination {
		display: block;
	}

	.menu-toggle,
	.sub-menu-toggle {
		border-width: 0;
		background-color: #fff;
		color: #333;
		display: block;
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		visibility: visible;
	}

	.sub-menu-toggle:hover,
	.sub-menu-toggle:focus {
		border-width: 0;
	}

	.menu-toggle {
		border-top: 1px solid #eee;
		line-height: 20px;
		position: relative;
		right: 0;
		z-index: 1000;
		width: 100%;
	}

	.site-header .menu-toggle {
		border: 0;
	}

	.menu-toggle:before,
	.menu-toggle.activated:before {
		margin-right: 10px;
		text-rendering: auto;
		-webkit-transform: translate(0, 0);
		-ms-transform:     translate(0, 0);
		transform:         translate(0, 0);
	}

	.sub-menu-toggle {
		float: right;
		padding: 10px;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 100;
	}

	.sub-menu-toggle:before {
		display: inline-block;
		text-rendering: auto;
		-webkit-transform: translate(0, 0);
		-ms-transform:     translate(0, 0);
		transform:         translate(0, 0);
	}

	.sub-menu-toggle.activated:before {
		content: "\f142";
	}

	.js .nav-primary .genesis-nav-menu .menu-item,
	.js .site-header .genesis-nav-menu .menu-item {
		display: block;
		float: none;
		margin: 1px 0;
		position: relative;
		text-align: left;
	}

	.js .genesis-nav-menu .menu-item:hover {
		position: relative;
	}

	.js .nav-primary .genesis-nav-menu .menu-item a,
	.js .site-header .genesis-nav-menu .menu-item a {
		border: none;
		padding: 12px 0;
		width: 100%;
	}

	.js .genesis-nav-menu .sub-menu {
		border: none;
	}

	.js .genesis-nav-menu .menu-item > a:focus ul.sub-menu,
	.js .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu {
		left: 0;
		margin-left: 0;
	}

	.js .genesis-nav-menu > .menu-item-has-children > a:after {
		content: none;
	}

	.js .genesis-nav-menu .sub-menu {
		clear: both;
		display: none;
		margin: 0;
		opacity: 1;
		padding-left: 15px;
		position: static;
		width: 100%;
	}

	.js .genesis-nav-menu .sub-menu .sub-menu {
		margin: 0;
	}

	.js nav button:hover,
	.js .menu-toggle:hover,
	.js .nav-primary {
		background-color: #fff;
		color: #000;
	}

	.js nav button:focus,
	.js .menu-toggle:focus {
		background-color: #fff;
		color: #c3251d;
	}

}

responsive-menu.php

<?php

//* Enqueue Scripts and Styles for default Mobile Menu
add_action( 'wp_enqueue_scripts', 'genesis_sample_enqueue_menu_scripts_styles' );
function genesis_sample_enqueue_menu_scripts_styles() {

	wp_enqueue_script( 'genesis-sample-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );
  	wp_enqueue_style( 'genesis-responsive-menu-css' , get_stylesheet_directory_uri() . '/css/responsive-menu.css', array() , '1.0.0', 'all' );

	$output = array(
		'mainMenu' => __( 'Menu', 'genesis-sample' ),
		'subMenu'  => __( 'Menu', 'genesis-sample' ),
	);

	wp_localize_script( 'genesis-sample-responsive-menu', 'genesisSampleL10n', $output );
}