How to add a responsive mobile menu before footer in Focus Pro

In Genesis Facebook group, a user wrote:

I am using Studiopress Focus Pro on this site. I have the custom menu widget in the header right widget area…I also have it in the footer 1 widget area…

What is happening is that the header menu will turn into a hamburger when viewed on a small device, however the footer menu will not…

I tried adding menu support in the functions file, but not sure I did it correctly..

What am I missing?

Let us register a custom Footer Navigation Menu in addition to the standard Primary and Secondary ones and display it before the footer using genesis_before_footer action hook with a depth of 1 (to not show the sub menus). We shall then adjust the javascript to include this footer menu add a small bit of CSS to ensure that down arrow font icons do not appear for the menu items that have sub menus in our custom footer menu.

Desktop view:

Mobile view:

When expanded:

Step 1

Add the following in Focus Pro‘s functions.php:

	// Add Theme Support for Genesis Menus
	add_theme_support( 'genesis-menus', array(
	'primary' => __( 'Primary Navigation Menu', 'genesis' ),
	'secondary' => __( 'Secondary Navigation Menu', 'genesis' ),
	'footer' => __( 'Footer Navigation Menu', 'genesis' ),
	) );

	// Hook menu before footer
	add_action( 'genesis_before_footer', 'sk_custom_footer' );
	function sk_custom_footer() {

	printf( '<nav %s>', genesis_attr( 'nav-footer' ) );
	wp_nav_menu( array(
	'theme_location' => 'footer',
	'container' => false,
	'depth' => 1,
	'fallback_cb' => false,
	'menu_class' => 'genesis-nav-menu',
	) );

	echo '</nav>';

	}

view raw functions.php hosted with

by GitHub

Step 2

At Appearance > Menus > Manage Locations assign the menu you would to display in the Footer Navigation Menu.

Step 3

Replace the entire code in js/responsive-menu.js with:

	jQuery(function( $ ){

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

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

	$(window).resize(function(){
	if(window.innerWidth > 767) {
	$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .nav-footer .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");
	});
	});

	});

view raw responsive-menu.js hosted with

by GitHub

Step 4

In Focus Pro’s style.css, in 767px media query, add the following after .genesis-nav-menu.responsive-menu > .menu-item-has-children::before CSS block:

	.nav-footer .genesis-nav-menu.responsive-menu > .menu-item-has-children::before {
	content: normal;
	}

view raw style.css hosted with

by GitHub

Source: Altitude Pro.

Update on Sunday, November 22, 2015

Chuck asks:

I see what I was doing wrong…I had the nav in footer widget 1 which is why I didn’t think your method was working…when I realized that you were not targeting the widget area…I got it to work…so thank you for that…. is there a way to make this work in the footer widget area?

Desktop:

Mobile:

If you would like a custom menu placed in Footer 1 widget area be mobile responsive instead of using a new footer menu, follow these steps instead of the above.