How to merge two menu managed separately in wordpress for displaying as one in front end theme?

Question

I am working on a wp theme for a site which is already built on wp, and having very large menu which is divided into two menu in wp admin.

I want to merge this two menu in theme in single UL. Currently it generates two menu in different div container and ul li, and is breaking the styles & js applied on it.

How can i merge this two menu into single ul li in single container?

Answer 1

You can combine them with this method. It keeps some of the menu classes generated by WP.

// two WordPress menus combined into one.
// first menu.
$menu = wp_nav_menu( array(
    'theme_location'=> 'secondary', // or whatever location
    'fallback_cb'   => false,
    'container'     => '',
    'items_wrap' => '%3$s',
    'echo' => false
) );
// include all of the menu items from the first inside the second menu.
wp_nav_menu( array(
    'theme_location' => 'primary', // or whatever location
    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s ' . $menu . '</ul>',
) );

Answer 2

The problem is that each wp_nav_menu is still being wrapped in individual div's. You need to turn off those div's as well, by adding "'container' => false" to each one, like so:

<ul id="MyMenu">
  <?php wp_nav_menu( array('menu' => 'FirstMenu', 'items_wrap' => '%3$s', 'container' => false ) ); ?>
  <?php wp_nav_menu( array('menu' => 'SecondMenu', 'items_wrap' => '%3$s', 'container' => false ) ); ?>
</ul>