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