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

Posted on

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.

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>';

}

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");
});
});

});

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;
	}

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?

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.

Step 1

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

jQuery(function( $ ){

$( ".footer-widgets .menu" ).addClass( "genesis-nav-menu" );

$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .footer-widgets .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, .footer-widgets .menu").slideToggle();
});

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

});

Step 2

Edit style.css.

a) Change

.footer-widgets {
	background: #fff url(images/lines.png);
	background-size: 6px 6px;
	color: #999;
	clear: both;
	font-size: 14px;
	margin-bottom: 5px;
	padding: 60px 60px 16px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 310px;
}

.footer-widgets-1 {
	margin-right: 40px;
}

.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}

.footer-widgets-3 {
	float: right;
}

.footer-widgets .widget {
	margin-bottom: 24px;
}

to

.footer-widgets {
	background: #fff url(images/lines.png);
	background-size: 6px 6px;
	color: #999;
	clear: both;
	font-size: 14px;
	margin-bottom: 5px;
	/*padding: 60px 60px 16px;*/
}

/*.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 310px;
}
.footer-widgets-1 {
	margin-right: 40px;
}
.footer-widgets-1,
.footer-widgets-2 {
	float: left;
}
.footer-widgets-3 {
	float: right;
}
.footer-widgets .widget {
	margin-bottom: 24px;
}*/

b) Add

.nav-footer {
	overflow: hidden;
	margin-bottom: 5px;
}

.footer-widgets .widget {
	margin-bottom: 0;
}

.footer-widgets .widget ul > li::before {
	content: normal;
}

.footer-widgets .widget ul > li {
	border-bottom: none;
	margin: 0;
	padding: 0;
}

c) In 1160px media query, comment out or delete

.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.sidebar-primary {
		width: 250px;
	}

d) In 1023px media query, comment out or delete

.footer-widgets {
		padding: 40px 5% 16px;
	}

Note: The other two footer widget areas, Footer 2 and Footer 3 will also be 100% wide with the above changes.