• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Genesis Tutorials Navigation Menus

Add Responsive Menu Icon Only to Genesis Primary Navigation Menu

January 13, 2015 Updated on January 13, 2015 Marcy Diaz

Share this post:

TwitterFacebookPinterestLinkedinEmail

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.

Share this post:

TwitterFacebookPinterestLinkedinEmail

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

Tell me about your website project for a personalized solution!

Contact Marcy »

___

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

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Petri says

    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

    Reply
    • Marcy Diaz says

      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.

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix AZ 85070

Phone: 602.759.0501
Email:

Contact Form
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2019   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!