Add Responsive Menu Icon Only to Genesis Primary Navigation Menu

Share this on:

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.

styled header menu with primary responsive menu

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.

default header menu with primary responsive menu

(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.

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

4 responses to “Add Responsive Menu Icon Only to Genesis Primary Navigation Menu”

  1. Petri Avatar
    Petri

    Hi Marcy,
    Thank you for this tutorial, it is exactly what I’m looking for.
    I tried to accomplish this in the Digital Pro theme, I have only 1 page and don’t want to collapse/hide the social icons that I added to the header menu, I want them to stay visible on all screens.
    However, in the /js folder there is a file named responsive-menu.js, but I don’t see the different navigation menus that are identified in this .js file, so I don’t understand what to remove…

    Do you have an idea?

    Thanks!
    Petri

    1. Marcy Diaz Avatar

      This tutorial is for older StudioPress themes and menus. It’s not for the menus used since the Workstation Pro theme. Those use a different JS script. If you add the social icons to the menu, then they are part of that menu, and you can’t collapse just part of a menu easily.

      Perhaps it would be better to add the social media icons in a different way. You could add another menu location in the header or add the right widget area back in, and then adjust the way it all looks with CSS, but this is really beyond the scope of this tutorial.

  2. Ankush Chhari Avatar
    Ankush Chhari

    Hi Marcy,
    Can You tell me that, How You’r Website Menu Open Fast and Hide in Mobile Phone. When I click on menu button in mobile then it open fast and close fast.
    What changes you do in you’r theme. please tell me because default in genesis menu is open slowly and hide also.
    I am not find the answer of that question any where. Please Reply.

    1. Marcy Diaz Avatar

      My menu is based on Genesis Sample 2.6.0. The most current Genesis Sample should work the same.
      If you have a theme with a different menu, then it will behave differently.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.