askdesign
9/19/2019 - 6:19 PM

Genesis Responsive Menu Navigation - How to create a collapsible responsive menu for a genesis child theme

/** RESPONSIVE MENU - by designnify - https://gist.github.com/designnify/e42f9430163aa6da15a0 **/
// Add the following in child theme’s functions.php:
// Enqueue Scripts and Styles
//* Activate the use of Dashicons
 add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

//* Enqueue scripts for Responsive menu
add_action( 'wp_enqueue_scripts', 'enqueue_responsive_menu_script' );
function enqueue_responsive_menu_script() {
 
	wp_enqueue_script( 'my-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
 
}
// https://gist.github.com/designnify/e42f9430163aa6da15a0 - designnify
// ASK Design added .nav-secondary .genesis-nav-menu 
// Create a file named responsive-menu.js in your child theme’s js directory (create if not existing) having the following code:
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");
		});
	});
 
});
/* --- mobile menu code - designnify - https://gist.github.com/designnify/e42f9430163aa6da15a0 --- */
/* --- Add the following in child theme’s style.css: --- */
/* --- ASK Design modified for askdesign.biz --- */
/* ## Responsive Nav CSS
---------------------------------------------------------------------------------------------------- */

.responsive-menu-icon {
	cursor: pointer;
	display: none;
}
 
.responsive-menu-icon::before {
	content: "\f333";
	display: block;
	font: normal 30px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	color: #fff;
}

/* ## Media Queries
---------------------------------------------------------------------------------------------------- */


@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:hover {
		position: static;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu li a,
	.genesis-nav-menu.responsive-menu li a:hover,
	.genesis-nav-menu.responsive-menu li.current-menu-item > a {
		background: none;
		display: block;
		line-height: 1;
		padding: 12px 0;
	}
	
	.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: 11px 0;
		right: 0;
		text-align: right;
		z-index: 9999;
		color: #fff;
	}
	
	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
		content: "\f343";
		color: pink;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu {
		left: auto;
		opacity: 1;
		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 {
		padding-left: 20px;
		margin: 0;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		background: none;
		border: none;
		box-shadow: none;
		padding: 12px 0;
		position: relative;
		width: 100%;
	}
	
	.genesis-nav-menu.responsive-menu {
		padding-bottom: 16px;
	}
	
	.nav-primary .genesis-nav-menu.responsive-menu li a {
		background: none;
		color: #FFF;
	}
	
	.nav-primary .genesis-nav-menu.responsive-menu li a:hover {
		background: none;
		color: pink;
	}
	
}
/* --- end of designnify's mobile menu code --- */