How to move the secondary nav menu below site header in Genesis Sample

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;
}
This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.