Merge two separate WP menus into one in Mobile view

I had the same problem. The solution I chose was to “merge” the menus by placing them under a single div wrapper but have them on separate div class.

Something like this:

<div class="menu-wrapper">
   <div class="menu1">
     <?php
            wp_nav_menu( array(
                'theme_location'  => 'menu-1',
                'menu_id'         => 'top-menu',
            ) );
        ?>
   </div>
   <div class="menu2">
     <?php
            wp_nav_menu( array(
                'theme_location'  => 'menu-2',
                'menu_id'         => 'main-menu',
            ) );
        ?>
   </div>
</div>

If you want to “merge” the actual menu objects, try placing menu item on variables via wp_get_nav_menu_items() then array_merge($menu1, $menu2). As for the control over the elements, maybe you can add an identifier while creating the new menu HTML with the merge list.

I’m not sure if this is the answer you are looking for nor if its the best approach. Hope it helps.