I've been trying to find a decent solution to a problem for a while now. In the theme I'm building I have a top "admin bar" menu with some contact links and below that my "logo area" and a main menu.

I would like to merge these menus into one single menu in mobile view but still keep some form of control over each separate menu when merged (different font size in each menu, etc).

Of course I could build a fourth menu with all the links I need to only display in mobile view and hide my regular menus but is that really the best way to go about this scenario?

This is my complete header markup:

<header id="masthead" class="site-header" role="banner">

    <?php if ( has_nav_menu( 'admin' ) ) : ?>
        <nav id="top-nav" class="top-bar menues" role="navigation"> 
                <?php wp_nav_menu( array( 'theme_location' => 'admin' ) ); ?>
        </nav><!-- #top-nav -->
    <?php endif; ?>

    <div class="site-branding wrap">
        <figure class="site-logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                <img class="inject-me" src="<?php echo esc_url( get_template_directory_uri() ); ?>/icons/logo.svg" alt="logo">
        </figure><!-- .site-logo -->    
    </div><!-- .site-branding -->

    <?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav id="site-navigation" class="main-navigation menues" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Menu', 'testsite' ); ?></button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu', 'menu_class' => 'nav-menu' ) ); ?>
        </nav><!-- #site-navigation -->
    <?php endif; ?>

</header><!-- #masthead -->

I've seen some code tips that use jquery? to clone one menu into another, but never anything WordPress specific. The result I'm trying to achieve is to tag along the "admin bar" under the main menu in mobile view so you get one long list of links.

Anybody working with a similar problem?

2 Answers 2


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">
            wp_nav_menu( array(
                'theme_location'  => 'menu-1',
                'menu_id'         => 'top-menu',
            ) );
   <div class="menu2">
            wp_nav_menu( array(
                'theme_location'  => 'menu-2',
                'menu_id'         => 'main-menu',
            ) );

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.


I think you just need coaching. I would go with creating the 4-th menu automatically based on the other two.

How and Why?

As lazy as possible, and because it can help you think more physical way. So you need to update the 4-th menu when you update the other two menus. This is lazy.

What about mobile? You are good, you will be able to create a class for your 4-th menu that would work only on mobile.

  • I understand that this seems to be the easiest way to solve this issue, but I'm wondering if it is the best, most elegant way? Commented Jan 2, 2017 at 16:16
  • This is not flattery, but you look like a very deep person. I think computers are there to listen to our instructions. They should work. The elegance goes from there how successful you are to govern them @nicklasbryntesson
    – prosti
    Commented Jan 2, 2017 at 16:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.