Custom Navigation Menu Location in Genesis Sample

The new Genesis Sample theme comes with two menus Primary and secondary. Unfortunately, the secondary menu is footer menu and not after primary menu.

This tutorial provides the steps to register a custom Menu navigation and display the menu assigned to it in the site header with the proper markup and corresponding skiplink in Genesis

While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.

Step 1.

Edit child theme’s functions.php

a) Add a ‘custom’ menu theme location.

Change this — from genesis-sample/functions.php line 161

// 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, secondary and Custom navigation menus.
add_theme_support(
    'genesis-menus', array(
        'primary'   => __( 'Header Menu', 'genesis-sample' ),
        'secondary' => __( 'Footer Menu', 'genesis-sample' ),
        'custom'    => __( 'Custom Menu', 'genesis-sample' ),
    )
);

b) Add the following. Make sure where you are adding the snippet, after the Step 1 a) snippet or at end of functions.php. You can Change (12 or 14 or15) or Remove the priority from action ‘wpize_custom_do_nav’

add_action( 'genesis_header', 'wpize_custom_do_nav', 14 );//change or remove the priority
/**
 * Echoes the "Custom Navigation" menu. from genesis/lib/structure/menu.php PART 1
 */
function wpize_custom_do_nav() {

    // Do nothing if menu not supported.
    if ( ! genesis_nav_menu_supported( 'custom' ) || ! has_nav_menu( 'custom' ) ) {
        return;
    }

    $class = 'menu genesis-nav-menu menu-custom';
    if ( genesis_superfish_enabled() ) {
        $class .= ' js-superfish';
    }

    genesis_nav_menu( array(
        'theme_location' => 'custom',
        'menu_class'     => $class,
    ) );

}


// Add typical attributes for navigation elements. from genesis/lib/functions/markup.php 494, 1232 and 1249 PART 2
add_filter( 'genesis_attr_nav-custom', 'genesis_attributes_nav' );

add_filter( 'genesis_attr_nav-custom', 'wpize_skiplinks_attr_nav_custom' );
/**
 * Adds ID markup to custom navigation.
 *
 * @param array $attributes Existing attributes for custom navigation element.
 * @return array Amended attributes for custom navigation element.
 */
function wpize_skiplinks_attr_nav_custom( $attributes ) {

    $attributes['id'] = 'genesis-nav-custom';

    return $attributes;

}


add_filter( 'genesis_skip_links_output', 'wpize_skip_links_output', 4 );
/**
 * Adds skip link for custom navigation. from genesis/lib/structure/header.php 859 and 826 PART 3
 *
 * @param array $links Exiting skiplinks.
 * @return array Amended skiplinks.
 */
function wpize_skip_links_output( $links ) {

    if ( genesis_nav_menu_supported( 'custom' ) && has_nav_menu( 'custom' ) ) {
        $links['genesis-nav-custom'] = __( 'Skip to custom navigation', 'genesis' );
    }

    return $links;

}

 

c) Add the custom menu to the list of menus to be combined in media mobile media screen width.

Change this

/**
 * 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-custom',
            ),
            'others'  => array(),
        ),
    );

    return $settings;

}

or You can simply add a new nav class ‘.nav-custom’, after ‘.nav-primary’,

Step 2.

Add the following in child theme’s style.css

@media only screen and (min-width: 960px) {
    .nav-custom .genesis-nav-menu a {
        padding-left: 15px;
        padding-right: 15px;
    }
    .nav-custom {
        clear: both;
        border-top: 1px solid #eee;
    }
}

Step 3.
Hover Appearance >> Menus >> Manage Locations || Create a new Menu, assign your desired menu in the Custom Menu location.

References:
genesis/lib/structure/menu.php
genesis/lib/functions/markup.php
genesis/lib/structure/header.php