This tutorial provides the steps to move a menu assigned to the Secondary Navigation location from the footer to below site header in Genesis Sample 2.6.0.
Step 1
Edit Genesis Sample’s functions.php.
a) Change the label for the secondary
menu location from Footer Menu
to Secondary Navigation
.
i.e., change
// Renames primary and secondary navigation menus.
add_theme_support(
'genesis-menus', array(
'primary' => __( 'Header Menu', 'genesis-sample' ),
'secondary' => __( 'Footer Menu', 'genesis-sample' ),
)
);
to
// Renames primary and secondary navigation menus.
add_theme_support(
'genesis-menus', array(
'primary' => __( 'Header Menu', 'genesis-sample' ),
'secondary' => __( 'Secondary Navigation', 'genesis-sample' ),
)
);
b) Remove the code that relocates the secondary nav menu.
Comment out or delete
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_footer', 'genesis_do_subnav', 10 );
c) If you wish to combine primary and secondary nav menus into the hamburger on smaller widths, change
/**
* Defines responsive menu settings.
*
* @since 2.3.0
*/
function genesis_sample_responsive_menu_settings() {
$settings = array(
'mainMenu' => __( 'Menu', 'genesis-sample' ),
'menuIconClass' => 'dashicons-before dashicons-menu',
'subMenu' => __( 'Submenu', 'genesis-sample' ),
'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',
'menuClasses' => array(
'combine' => array(
'.nav-primary',
),
'others' => array(),
),
);
return $settings;
}
to
/**
* Defines responsive menu settings.
*
* @since 2.3.0
*/
function genesis_sample_responsive_menu_settings() {
$settings = array(
'mainMenu' => __( 'Menu', 'genesis-sample' ),
'menuIconClass' => 'dashicons-before dashicons-menu',
'subMenu' => __( 'Submenu', 'genesis-sample' ),
'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',
'menuClasses' => array(
'combine' => array(
'.nav-primary',
'.nav-secondary',
),
'others' => array(),
),
);
return $settings;
}
Step 2
Change the selector in the Javascript file that should automatically get a top margin equal to the height of the site header.
In js/genesis-sample.js change
$('.site-inner').css('margin-top', siteInnerMarginTop);
to
$( '.nav-secondary' ).css( 'margin-top', siteInnerMarginTop );
Step 3
Remove the top margin for .site-inner
.
In style.css, inside the 960px min-width media query change
.site-inner {
margin-top: 70px;
max-width: 1140px;
}
to
.site-inner {
margin-top: 0;
max-width: 1140px;
}
Love it when you explain via Video. 🙂 Thank you!