Cacher is the code snippet organizer for pro developers

https://sridharkatakam.com/add-beautiful-pros-mobile-responsive-menu-genesis-themes/
August 18, 2014 by Sridhar Katakam

This is an update to my earlier article titled How to make Header menu in Genesis mobile responsive similar to that in Beautiful Pro. The earlier article worked with Beautiful Pro version 1.0.1. This tutorial is for the current latest v1.1.

Below are screenshots showing the result of applying the steps in Genesis Sample.

/* --- Add the following at in child theme’s style.css: --- */
/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	cursor: pointer;
	display: none;
	margin-bottom: -1px;
	text-align: center;
}

.responsive-menu-icon::before {
	content: "\f333";
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
}
.nav-primary .responsive-menu-icon::before {
	color: #fff;
}

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

	.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
	.genesis-nav-menu.responsive-menu {
		display: none;
	}

	.genesis-nav-menu.responsive-menu .menu-item,
	.responsive-menu-icon {
		display: block;
	}

	.genesis-nav-menu.responsive-menu .menu-item {
		margin: 0;
	}

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

	.genesis-nav-menu.responsive-menu .current-menu-item > a,
	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu a,
	.genesis-nav-menu.responsive-menu a:hover {
		background: none;
		line-height: 1;
		padding: 16px 20px;
	}
	.nav-primary .genesis-nav-menu.responsive-menu .current-menu-item > a,
	.nav-primary .genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.nav-primary .genesis-nav-menu.responsive-menu a,
	.nav-primary .genesis-nav-menu.responsive-menu a:hover {
		color: #fff;
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children {
		cursor: pointer;
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
		margin-right: 60px;
	}

	.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		content: "\f347";
		float: right;
		font: normal 16px/1 'dashicons';
		height: 16px;
		padding: 16px 20px;
		right: 0;
		text-align: right;
		z-index: 9999;
	}
	.nav-primary .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		color: #fff;
	}

	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
		content: "\f343";
	}

	.genesis-nav-menu.responsive-menu .sub-menu {
		border: none;
		left: auto;
		opacity: 1;
		padding-left: 25px;
		position: relative;
		-moz-transition:    opacity .4s ease-in-out;
		-ms-transition:     opacity .4s ease-in-out;
		-o-transition:      opacity .4s ease-in-out;
		-webkit-transition: opacity .4s ease-in-out;
		transition:         opacity .4s ease-in-out;
		width: 100%;
		z-index: 99;
	}

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

	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		background: none;
		border: none;
		padding: 12px 20px;
		position: relative;
		width: 100%;
	}

}

/* --- Since the primary navigation has a dark background in Genesis Sample, 
few additional lines of code has been added in the above (besides what’s taken 
from Beautiful Pro’s stylesheet) to ensure that text (nav menu links) and the 
open/close icons are visible (white). If your child theme’s primary nav bar does 
not have a dark background, you may want to remove/comment out lines 18-20, 50-55 and 75-77.
--- */

// Add the following in child theme’s functions.php:
// Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'custom_scripts_styles_mobile_responsive' );
function custom_scripts_styles_mobile_responsive() {

	wp_enqueue_script( 'beautiful-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_style( 'dashicons' );

}

// Upload beautiful-pro/js/responsive-menu.js (mirror) to {child theme directory}/js (create ‘js’ if not existing).

// Ex.: wp-content/themes/genesis-sample/js/responsive-menu.js

// https://gist.githubusercontent.com/srikat/f6f22d5fae3a7495c0ad/raw/b66e3f7b5c0d81465f516bfc1842cce71ca3566f/responsive-menu.js

jQuery(function( $ ){

	$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

	$(".responsive-menu-icon").click(function(){
		$(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
	});

	$(window).resize(function(){
		if(window.innerWidth > 768) {
			$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
			$(".responsive-menu > .menu-item").removeClass("menu-open");
		}
	});

	$(".responsive-menu > .menu-item").click(function(event){
		if (event.target !== this)
		return;
			$(this).find(".sub-menu:first").slideToggle(function() {
			$(this).parent().toggleClass("menu-open");
		});
	});

});