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"> </a> </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?