Cacher is the code snippet organizer for pro developers

// Create a file named say, general.js in child theme’s js directory having:

jQuery(function( $ ){

	$( ".menu-toggle" ).click(function() {
		$( ".nav-primary" ).slideToggle();
	});

});

This tutorial covers

  *  repositioning the primary navigation menu i.e., moving it from below the site header to above it
  *  loading Dashicons (for the hamburger menu icon)
  *  running slideToggle() jQuery method upon clicking the menu icon
  *  placing Menu text in a text widget followed by using :before pseudo CSS selector for the hamburger icon and writing other needed CSS

Drag a text widget in Header Right widget area and paste:
<span class="menu-toggle">Menu</span>

/* Menu Toggle
--------------------------------------------- */

.nav-primary {
	display: none;
}

.menu-toggle {
	cursor: pointer;
}

.menu-toggle:before {
	content: "\f333";
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'dashicons';
	vertical-align: middle;
	margin-top: -3px;
	padding-right: 3px;
}

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

	.title-area {
		float: none;
	}

	.site-header .widget-area {
		float: none;
		text-align: center;
		overflow: hidden;
		margin-top: 10px;
	}

}

//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before_header', 'genesis_do_nav' );

//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );
function enqueue_dashicons() {

	wp_enqueue_style( 'dashicons' );

}

//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {

	wp_enqueue_script( 'general',  get_stylesheet_directory_uri() . '/js/general.js', array( 'jquery' ), '', true );

}