Wordpress + Bootstrap: Replace primary navigation menu on mobile?

admin管理员组

文章数量:1391977

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 -->

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 -->

• menus
• navigation
• sub-menu
• twitter-bootstrap

Share Improve this question asked Mar 10, 2020 at 16:33 taylor018taylor018 10111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

All you have to do is to change the name of the menu location.

Change the line where it says:

'theme_location'    => 'primary',

to

'theme_location'    => 'sidebar',

and viceverse.

That should do the trick.

However, you should keep in mind that this kind of setup can become pretty confusing. (In case you mistake one for the other and start looking at the wrong positions etc.)

本文标签： WordpressBootstrap Replace primary navigation menu on mobile