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.