Cacher is the code snippet organizer for pro developers

http://ozzyrodriguez.com/tutorials/genesis/genesis-responsive-menu-2-0/

1. Creating Necessary Folders for our Genesis Responsive Menu

For this tutorial, I’ll be using a fresh install of the Sample Child theme from Genesis. You may or may not have to change a couple of things used in the tutorial, depending on how much your child theme is customized.

The first thing we’re going to do is create a directory ‘lib’ in your child theme’s directory if you don’t have one. We do this to separate stuff and keep our child theme’s directory as clean as possible. Technically you could just place the js file in the theme’s root directory, but I prefer to keep things organized.

Inside of our ‘lib’ directory, create a ‘js’ directory, if you don’t have one already. We’ll use this directory to add the JavaScript file that’s going to make the responsive menu work. Again, let’s keep this organized.

NOTES: 
-- If you only want to make the primary nav responsive...
You’d have to change a couple of things to only select the primary nav. Whenever you see ‘nav’ in the javascript or css, you’d need to change that to ‘.nav-primary’. Then it will only select the primary navigation!

-- You may also have to disable the superfish script as that may conflict with what the responsive-menu.js is trying to do.

// 2. Magical Genesis Responsive Goodness

// Now that our directory structure is in place, we can start placing and editing files that make the magic happen. Don’t be scurred, it’s not too difficult.

// First we create the JavaScript file that our menu will be using. Create a file named ‘responsive-menu.js’ in the ‘js’ directory from the step before and paste in the following code:

( function( window, $, undefined ) {
	'use strict';

	$( 'nav' ).before( '<button class="menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to menus
	$( 'nav .sub-menu' ).before( '<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to sub menus

	// Show/hide the navigation
	$( '.menu-toggle, .sub-menu-toggle' ).on( 'click', function() {
		var $this = $( this );
		$this.attr( 'aria-pressed', function( index, value ) {
			return 'false' === value ? 'true' : 'false';
		});

		$this.toggleClass( 'activated' );
		$this.next( 'nav, .sub-menu' ).slideToggle( 'fast' );

	});

})( this, jQuery );

// 3. Now we need to make sure our theme uses that file we just created. Hello wp_enqueue_script! We need to add the following code in the functions.php of your child theme:

// Register responsive menu script
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_scripts' );
/**
 * Enqueue responsive javascript
 * @author Ozzy Rodriguez
 * @todo Change 'prefix' to your theme's prefix
 */
function prefix_enqueue_scripts() {

	wp_enqueue_script( 'prefix-responsive-menu', get_stylesheet_directory_uri() . '/lib/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true ); // Change 'prefix' to your theme's prefix

}

/*--- 4. The final piece to the puzzle is in the CSS and I’ve done the work for you. 
Add the following to the bottom of your style.css in your child theme: --- */

/* Responsive Navigation
---------------------------------------------------------------------------------------------------- */

/* Standard Navigation
--------------------------------------------- */

nav {
	clear: both;
}

/* Navigation toggles
--------------------------------------------- */

.sub-menu-toggle,
.menu-toggle {
	display: none;
	visibility: hidden;
}

/* Navigation toggles - Ensure Menu Displays when Scaled Up
--------------------------------------------- */

@media only screen and (min-width: 768px) {

	nav {
		display: block !important;
	}
}

/* Navigation toggles - Mobile (Change max width as you see fit)
--------------------------------------------- */

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

	.menu-toggle,
	.sub-menu-toggle {
		display: block;
		font-size: 20px;
		font-size: 2rem;
		font-weight: 700;
		margin: 0 auto;
		overflow: hidden;
		padding: 20px;
		padding: 2rem;
		text-align: center;
		visibility: visible;
	}

	button.menu-toggle,
	button.sub-menu-toggle {
		background-color: transparent;
		color: #999;
	}

	.sub-menu-toggle {
		padding: 18px;
		padding: 1.8rem;
		position: absolute;
		right: 0;
		top: 0;
	}

	.menu-toggle:before {
		content: "\2261";
	}

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

	.sub-menu-toggle:before {
		content: "+";
	}

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

	nav {
		display: none;
		position: relative;
	}

	.genesis-nav-menu .menu-item {
		background-color: #f5f5f5;
		display: block;
		position: relative;
		text-align: left;
	}

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

	.genesis-nav-menu .sub-menu {
		clear: both;
		display: none;
		opacity: 1;
		position: static;
		width: 100%;
	}

	.genesis-nav-menu .sub-menu a {
		border-left: 0;
		position: relative;
		width: auto;
	}

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

	.genesis-nav-menu .sub-menu .sub-menu a {
		background-color: #f5f5f5;
		padding-left: 30px;
	}

	.genesis-nav-menu .sub-menu .sub-menu .sub-menu a {
		background-color: #fff;
		padding-left: 40px;
	}

	.nav-primary a:hover,
	.nav-primary .current-menu-item > a {
		color: #333;
	}

}