So, I have a site that has a main navigation bar at the top and a secondary nav in the sidebar. The secondary nav includes the same links in the main nav but with dropdowns for the child pages. It works fine on desktop but when the navs collapse, I get two navbars at the top, basically showing the same thing. So, I’m thinking, for mobile, since the sidebar nav is just a more detailed version of the main nav, I just need to replace the menu in the main nav with the menu in the sidebar then hide the sidebar.

Essentially, I need to switch the sidebar menu location for mobile with a different menu. But, I a bit stumped on how to do that.

Here’s my header.php:

    <header id="masthead" class="site-header fixed-top <?php echo wp_bootstrap_starter_bg_class(); ?>" role="banner">
        <div class="container-fluid">
            <nav class="navbar navbar-expand p-0 flex-column flex-md-row px-0">
                <div class="navbar-brand">
                    <?php if ( get_theme_mod( 'wp_bootstrap_starter_logo' ) ): ?>
                        <a href="<?php echo esc_url( home_url( '/' )); ?>">
                            <img src="<?php echo esc_url(get_theme_mod( 'wp_bootstrap_starter_logo' )); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
                        </a>
                    <?php else : ?>
                        <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
                    <?php endif; ?>

                </div>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>


                <?php

                wp_nav_menu(array(
                'theme_location'    => 'primary',
                'container'       => 'div',
                'container_id'    => 'main-nav',
                'container_class' => 'collapse navbar-collapse d-flex justify-content-end',
                'menu_id'         => false,
                'menu_class'      => 'navbar-nav',
                'depth'           => 3,
                'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                'walker'          => new wp_bootstrap_navwalker()
                ));
                ?>
            </nav>
        </div>
    </header><!-- #masthead -->

Here’s my sidebar.php

<aside id="secondary" class="widget-area col-md-3 col-xl-2 sidebar" role="complementary">

    <?php dynamic_sidebar( 'sidebar-1' ); ?>

            <nav class="navbar sidebar-nav navbar-light">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#secondary-nav" aria-controls="" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                                <?php
                                wp_nav_menu(array(
                                'theme_location'    => 'sidebar',
                                'container'       => 'div',
                                'container_id'    => 'secondary-nav',
                                'container_class' => 'collapse navbar-collapse',
                                'menu_id'         => false,
                                'menu_class'      => 'navbar-nav flex-column',
                                'depth'           => 3,
                                'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                                'walker'          => new wp_bootstrap_navwalker()
                                ));
                                ?>

            </nav>

</aside><!-- #secondary -->