• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Adding Additional Nav Menu’s in Genesis

By default, Genesis only supports 2 navigation menus.

But what about adding a third or fourth menu?

Edit Menus

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.

Manage Locations

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.

primary style

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.

secondary style

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;
}

third menu style

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

Nav Menu

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.