Open Genesis Primary and Secondary Navigation with a Single Responsive Menu Icon

Share this on:

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.

single responsive navigation icon for primary and secondary navigation menus

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.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

3 responses to “Open Genesis Primary and Secondary Navigation with a Single Responsive Menu Icon”

  1. Petri Avatar
    Petri

    Hi Marcy,
    Do you think there is an easy way to do this the other way around, I mean displaying the menu ‘full’ in responsive view, without a resp. menu icon (which is there by default), the menu is in a header widget.
    Being the genesis responsive menu specialist, many you have an idea ;-)

    Thanks!

    1. Marcy Diaz Avatar

      Well, I wouldn’t say specialist; I just try to be helpful. :)
      In general, this is what you would do:
      1. Remove or comment out the line in functions.php that enqueues responsive-menu.js
      2. Remove or comment out the CSS in the “Responsive Menu” section for selector .responsive-menu-icon
      3. In the @media section, comment out all the CSS that refers to .genesis-nav-menu
      4. Then depending on what has happened to your menu, add or uncomment the CSS in the @media section to do what you want; this will depend on your theme.

      You probably want to keep:
      .genesis-nav-menu li,
      .site-header ul.genesis-nav-menu {
      float: none;
      }

      .genesis-nav-menu,
      .site-header .widget-area {
      text-align: center;
      }

      1. Petri Avatar
        Petri

        Thank you!
        I’ll give it a try soon and will inform you about the result.

Leave a Reply

Your email address will not be published. Required fields are marked *