-->

Responsive Menu Code Genesis Child Part 2 - Genesis Framework

    In the previous article, you completed a Genesis Child using the Genesis Framework hooks and extension functions. In this article, let's continue to use the Genesis Framework itself to create Responsive. We will go straight to the main point, you can refer to here Genesis Responsive Menu

    Code Genesis Child Responsive Menu
    Code Genesis Child Responsive Menu

    Create a folder containing responsive jquery

    Open your child themes folder, create a sub-folder assets and folder js lies in it. Next you create the file named responsive-menus.min.js Copy the below jquery and save it.

    Responsive-menus.min.js File

     /**  * This script adds the accessibility-ready responsive menus Genesis Framework child themes.  *  * @author StudioPress  * @link https://github.com/copyblogger/responsive-menus  * @version 1.1.2  * @license GPL-2.0+  */  var genesisMenuParams      = typeof genesis_responsive_menu === 'undefined' ? '' : genesis_responsive_menu, 	genesisMenusUnchecked  = genesisMenuParams.menuClasses, 	genesisMenus           = {}, 	menusToCombine         = ();  ( function ( document, $, undefined ) {  	'use strict';  	// Make our menus unique if there's more than one instance on the page. 	/** 	 * Validate the menus passed by the theme with what's being loaded on the page, 	 * and pass the new and accurate information to our new data. 	 * @param {genesisMenusUnchecked} Raw data from the localized script in the theme. 	 * @return {array} genesisMenus array gets populated with updated data. 	 * @return {array} menusToCombine array gets populated with relevant data. 	 */ 	$.each( genesisMenusUnchecked, function( group ) {  		// Mirror our group object to populate. 		genesisMenus(group) = ();  		// Loop through each instance of the specified menu on the page. 		$.each( this, function( key, value ) {  			var menuString = value, 				$menu      = $(value);  			// If there is more than one instance, append the index and update array. 			if ( $menu.length > 1 ) {  				$.each( $menu, function( key, value ) {  					var newString = menuString + '-' + key;  					$(this).addClass( newString.replace('.','') );  					genesisMenus(group).push( newString );  					if ( 'combine' === group ) { 						menusToCombine.push( newString ); 					}  				});  			} else if ( $menu.length == 1 ) {  				genesisMenus(group).push( menuString );  				if ( 'combine' === group ) { 					menusToCombine.push( menuString ); 				}  			}  		});  	});  	// Make sure there is something to use for the 'others' array. 	if ( typeof genesisMenus.others == 'undefined' ) { 		genesisMenus.others = (); 	}  	// If there's only one menu on the page for combining, push it to the 'others' array and nullify our 'combine' variable. 	if ( menusToCombine.length == 1 ) { 		genesisMenus.others.push( menusToCombine(0) ); 		genesisMenus.combine = null; 		menusToCombine = null; 	}  	var genesisMenu         = {}, 		mainMenuButtonClass = 'menu-toggle', 		subMenuButtonClass  = 'sub-menu-toggle', 		responsiveMenuClass = 'genesis-responsive-menu';  	// Initialize. 	genesisMenu.init = function() {  		// Exit early if there are no menus to do anything. 		if ( $( _getAllMenusArray() ).length == 0 ) { 			return; 		}  		var menuIconClass     = typeof genesisMenuParams.menuIconClass !== 'undefined' ? genesisMenuParams.menuIconClass : 'dashicons-before dashicons-menu', 			subMenuIconClass  = typeof genesisMenuParams.subMenuIconClass !== 'undefined' ? genesisMenuParams.subMenuIconClass : 'dashicons-before dashicons-arrow-down-alt2', 			toggleButtons     = { 				menu : $( '

    Function.php File

    Use hook wp_enqueue_scripts to add Google font, dashicons, responsive menus.

     // Enqueue required fonts, scripts, and styles. add_action( 'wp_enqueue_scripts', 'genesis_child_enqueue_scripts' ); function genesis_child_enqueue_scripts() { 	wp_enqueue_style( 'dashicons' );  	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400|Raleway:400,500,900', array(), CHILD_THEME_VERSION );  	$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min'; 	wp_enqueue_script( 'genesis_child-responsive-menu', get_stylesheet_directory_uri() . '/assets/js/responsive-menus' . $suffix . '.js', array( 'jquery' ), CHILD_THEME_VERSION, true ); 	wp_localize_script( 		'genesis_child-responsive-menu', 		'genesis_responsive_menu', 		genesis_child_responsive_menu_settings() 	);  }  // Define our responsive menu settings. function genesis_child_responsive_menu_settings() {  	$settings = array( 		'mainMenu'    => __( 'Menu', 'genesis_child' ), 		'subMenu'     => __( 'Submenu', 'genesis_child' ), 		'menuClasses' => array( 			'combine' => array( 				'.nav-primary', 				'.nav-secondary', 			), 		), 	);  	return $settings;  } 

    Style.css File

    So you've added Responsive successfully, now we proceed Css for the menu.

     /* Responsive Menu --------------------------------------------- */  .menu .menu-item:focus { 	position: static; }  .menu .menu-item > a:focus + ul.sub-menu, .menu .menu-item.sfHover > ul.sub-menu { 	left: auto; 	opacity: 1; }  .genesis-responsive-menu { 	display: none; 	position: relative; }  .genesis-responsive-menu .genesis-nav-menu .menu-item:hover > .sub-menu { 	display: none; }  .menu-toggle, .sub-menu-toggle { 	background-color: transparent; 	border-width: 0; 	color: #333; 	display: block; 	margin: 0 auto; 	overflow: hidden; 	text-align: center; 	visibility: visible; }  .menu-toggle:focus, .menu-toggle:hover, .sub-menu-toggle:focus, .sub-menu-toggle:hover { 	background-color: transparent; 	border-width: 0; 	color: #0073e5; }  .menu-toggle { 	line-height: 20px; 	margin-bottom: 10px; 	margin-top: 10px; 	padding: 15px 0; 	position: relative; 	z-index: 1000; }  .menu-toggle.activated::before { 	content: "f335"; }  .site-header .menu-toggle::before { 	float: left; 	margin-right: 5px; 	position: relative; 	text-rendering: auto; 	top: 1px; }  .sub-menu-toggle { 	float: right; 	padding: 9px 10px; 	position: absolute; 	right: 0; 	top: 0; 	z-index: 100; }  .sub-menu .sub-menu-toggle { 	padding: 12px 10px; }  .sub-menu-toggle::before { 	display: inline-block; 	text-rendering: auto; 	transform: rotate(0); 	transition: transform 0.25s ease-in-out; }  .sub-menu-toggle.activated::before { 	transform: rotate(180deg); }  /* Media Queries ---------------------------------------------------------------------------- */  @media only screen and (min-width: 960px) {  	/* Genesis Menu 	--------------------------------------------- */  	.genesis-nav-menu .menu-item { 		display: inline-block; 	}  	.genesis-nav-menu .menu-item:focus, 	.genesis-nav-menu .menu-item:hover { 		position: relative; 	}  	.genesis-nav-menu > .menu-bold > a { 		font-weight: 700; 	}  	.genesis-nav-menu > .menu-highlight > a { 		background-color: #333; 		border-radius: 3px; 		color: #fff; 		font-weight: 600; 		margin-left: 15px; 		padding-left: 20px; 		padding-right: 20px; 	}  	.genesis-nav-menu > .menu-highlight > a:focus, 	.genesis-nav-menu > .menu-highlight > a:hover { 		background-color: #0073e5; 	}  	.genesis-nav-menu .sub-menu, 	.genesis-nav-menu .sub-menu a { 		width: 180px; 	}  	.genesis-nav-menu .sub-menu { 		border-top: 1px solid #eee; 		opacity: 0; 		padding-left: 0; 		position: absolute; 		transition: opacity 0.4s ease-in-out; 	}  	.genesis-nav-menu .sub-menu a { 		border: 1px solid #eee; 		border-top: 0; 		padding-bottom: 15px; 		padding-top: 15px; 	}  	.genesis-nav-menu .sub-menu .sub-menu { 		margin: -46px 0 0 179px; 	}  	/* Responsive Menu 	--------------------------------------------- */  	.genesis-responsive-menu { 		display: block; 		padding-top: 15px; 	}  	.menu-toggle, 	.sub-menu-toggle { 		display: none; 		visibility: hidden; 	}  	/* Header Menu 	--------------------------------------------- */  	.nav-primary { 		clear: none; 		width: auto; 	}  	.nav-primary .genesis-nav-menu a { 		padding-left: 15px; 		padding-right: 15px; 	}  }  @media only screen and (max-width: 960px) { 	.genesis-nav-menu .menu-item { 		display: unset; 		text-align: left; 	} } 

    Epilogue

    Wraps, closed article to create beautiful Menus Responsive on Genesis Chid.

    I hope you find this guide helpful. If so, consider sharing it with your audience!



    ->

    No comments