Adding Additional Nav Menu’s in Genesis

By default, Genesis only supports 2 navigation menus.

But what about adding a third or fourth menu?

Here’s the code which goes in your child themes functions file to register and hook in a third nav menu.

Simply change the hook position to change the menu location your new menu outputs.

Styling

The code includes the container class for the existing genesis-nav-menu so no further styling is needed in most cases.

You can wrap the wp_nav_menu function in an existing class which already includes CSS in your child themes style.css file or add a new class to change the styling completely.

Using Existing Primary Nav Menu Class

echo'

<div class="nav-primary">';
wp_nav_menu( array( 'theme_location' => 'third-menu', 'container_class' => 'genesis-nav-menu' ) );
echo'</div>

';

The class added to the PHP code above styles your third menu the same as the primary nav.

Using Existing Secondary Nav Menu Class

echo'

<div class="nav-secondary">';
wp_nav_menu( array( 'theme_location' => 'third-menu', 'container_class' => 'genesis-nav-menu' ) );
echo'</div>

';

The class added to the PHP code above styles your third menu the same as the secondary nav.

New Class

echo'

<div class="third-menu">';
wp_nav_menu( array( 'theme_location' => 'third-menu', 'container_class' => 'genesis-nav-menu' ) );
echo'</div>

';

The new class added to the PHP code above enables you to style your third nav menu differently to your existing menus by adding CSS code in your style sheet.

CSS

.third-menu {
    background-color: red;
}

Other Methods For Creating Nav Menus In Genesis

This method removes the default support for the existing primary and secondary nav menus then adds them back with the third and subsequent menus you want to provide support for in Genesis.

This method isn’t as efficient however the result is exactly the same but only works on Genesis.

Don’t forget, you could also create a new widget area in any Genesis hook location and use the custom menu widget to display any number of menus you have created.

Related Tutorials

• Add 3rd Nav Menu To Genesis & Combine With Mobile Menu