askdesign
11/28/2015 - 9:19 PM

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

Sridhar Katakam

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

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

});
//* https://sridharkatakam.com/how-to-a-responsive-mobile-menu-before-footer-in-focus-pro/
//* 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 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 - 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;
	}
/* 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;
	}
Step 2

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