Add Responsive Menu Icon Only to Genesis Primary Navigation Menu

Most Genesis themes now include responsive navigation menus for smaller screen sizes, and some add a responsive menu icon to several menu locations – header, primary, and secondary.

Perhaps you need to use two menus, but you have only a few menu items in the header navigation, like your membership area login and account, or for a store, just the account login and cart. You probably don’t ever want to hide membership, account, and cart menu items; you want them always accessible, like the image above.

The themes Executive Pro and Enterprise Pro add the responsive menu icon to both the header and primary navigation menus. But you can edit the theme file that adds the responsive menu icon, so that it adds to only the primary navigation.

(You can make other changes to your Genesis responsive menus, such as use one responsive menu icon for two menu locations.)

For now, we want to leave the header menu as it is for large screens, but have the primary navigation menu be responsive, so let’s get started.

Step 1. Find the jQuery File to Edit

In your themes folder, find the folder /js.
Inside /js is a file named responsive-menu.js in Executive Pro and Enterprise Pro; menus may be included in another .js file for other themes.

Step 2. Find the Navigation Classes

The three different navigation menus are identified in the .js file by:

• Header – header .genesis-nav-menu
• Secondary Navigation – .nav-secondary .genesis-nav-menu
• Primary Navigation – .nav-primary .genesis-nav-menu

And these classes are used three times in the .js file.

Step 3. Remove the Unwanted Navigation Classes

• If you don’t want to add the responsive menu icon to the header menu, you would find and delete all three instances of header .genesis-nav-menu
• If you don’t want to add the responsive menu icon to the secondary menu, you would find and delete all three instances of .nav-secondary .genesis-nav-menu
• If you don’t want to add the responsive menu icon to the primary menu (but you want it for the header or secondary), you would find and delete all three instances of .nav-primary .genesis-nav-menu

Save your responsive-menu.js file.

Step 4. Adding Icon to Only Primary Navigation

So for Executive Pro and Enterprise Pro themes, you would remove header .genesis-nav-menu, so that the final responsive-menu.js is:

jQuery(function( $ ){

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

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

	$(window).resize(function(){
		if(window.innerWidth > 800) {
			$(".nav-primary .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");
		});
	});

});

So that’s it; you’re finished.

The first image in this post has menus that have been styled more like you see often for a membership or store login and cart, but you can add any styles you like.