Genesis responsive menus (updated summer 2014) vary slightly from theme to theme, but most add a separate responsive icon into each navigation menu at smaller screen sizes. This keeps each navigation menu opening and closing independently.
But you may want to have only one responsive menu icon that opens and closes both the primary and secondary navigation menus at the same time in your Genesis theme. This is useful if your layout has the primary navigation positioned just above the secondary navigation, and especially, if you are using both the primary and secondary navigation for a split navigation menu with a centered logo (nav – logo – nav).
The responsive menu is created with a jQuery file – /js/responsive-menu.js – located in the child theme folder. This is the file that you can edit or replace to open and close both the primary and secondary navigation menus at the same time.
Begin with Executive Pro Code
The responsive-menu.js that this tutorial starts with comes from the Executive Pro (or Enterprise Pro) child themes. These child themes originally add a responsive menu icon to both the header and primary navigation, but not the secondary navigation.
In Executive Pro and Enterprise Pro, the secondary navigation is moved to the footer. To keep it just below the primary navigation, you would find and comment out (as shown) the following section in your child theme functions.php.
Move the Secondary Menu Back Below the Primary Menu
<!--?php
//* Do NOT include the opening php tag
/*
//* Reposition the secondary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_footer', 'genesis_do_subnav', 7 );
//* Reduce the secondary navigation menu to one level depth
add_filter( 'wp_nav_menu_args', 'executive_secondary_menu_args' );
function executive_secondary_menu_args( $args ){
if( 'secondary' != $args['theme_location'] )
return $args;
$args['depth'] = 1;
return $args;
}*/
Enqueue the Responsive Menu Script
You will also need to be sure that responsive-menu.js is enqueued in your functions.php. Add or edit the following:
<?php //* Do NOT include the opening php tag
/* Edit (or add) the enqueue for the responsive menu */
//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'executive_load_scripts' );
function executive_load_scripts() {
wp_enqueue_script( 'executive-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . 'https://g3f2z8v4.rocketcdn.me/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
}
Responsive Menu Code
Note that when you are using the following code, you should NOT use a custom menu in your Header Right widget area. Different code would be required.
Save the following as /js/responsive-menu.js (Rename the original file first.)
jQuery(function( $ ){
$(".genesis-nav-menu").addClass("responsive-menu");
$('<div class="responsive-menu-icon"></div>').insertBefore( '.nav-primary .genesis-nav-menu' );
$(".responsive-menu-icon").click(function(){
$(".genesis-nav-menu").slideToggle();
$(this).toggleClass("menu-open");
});
$(window).resize(function(){
if(window.innerWidth > 800) {
$(".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");
});
});
});
Explanation of Responsive Menu Code
Section 1
$(".genesis-nav-menu").addClass("responsive-menu");
$('<div class="responsive-menu-icon"></div>').insertBefore( '.nav-primary .genesis-nav-menu' );
The first section adds the class .responsive-menu to all .genesis-nav-menu
selectors. This is so that they will all use the responsive menu CSS. This section also adds the responsive menu icon just before the primary navigation.
Section 2
$(".responsive-menu-icon").click(function(){
$(".genesis-nav-menu").slideToggle();
$(this).toggleClass("menu-open");
});
The second section adds a class of .menu-open to each of the .genesis-nav-menus, both .primary-nav and .secondary-nav, when the responsive menu icon is clicked, so that both menus are opened with one click. They will both use the CSS for menu-open.
Section 3
$(window).resize(function(){
if(window.innerWidth > 800) {
$(".genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});
The third section is from the original responsive menu code. It removes the added responsive menu classes at larger screen sizes. The line if(window.innerWidth > 800) {
should be adjusted to be the same width (800) as the width for the media query that adds the responsive menu icon in your style.css. For Exectutive Pro, this is @media only screen and (max-width: 800px) {
.
Section 3
The last section of code is from the original responsive menu code. It opens and closes each sub-menu when a parent menu item is clicked.
All the code can also be copied from a GitHub Gist.
The CSS included with either the Enterprise Pro or Executive Pro themes should continue to work with this responsive menu code.
This is just one way that the responsive menu code can be adjusted to open and close both the primary and secondary navigation menus with a single responsive menu icon for Genesis child themes.