WordPress+Bootstrap:替换手机上的主导航菜单?

时间:2020-03-10 作者:taylor018

所以,我有一个网站,在顶部有一个主导航栏,在侧栏有一个辅助导航栏。辅助导航在主导航中包含相同的链接,但子页面有下拉菜单。它在桌面上运行得很好,但当导航崩溃时,我会在顶部看到两个导航栏,基本上显示相同的内容。所以,我在想,对于移动设备,由于侧栏导航只是主导航的更详细版本,我只需要将主导航中的菜单替换为侧栏中的菜单,然后隐藏侧栏。

本质上,我需要切换侧边栏菜单位置,移动与不同的菜单。但是,我有点困惑于如何做到这一点。

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

1 个回复
SO网友:user3135691

您所要做的就是更改菜单位置的名称。

更改显示以下内容的行:

\'theme_location\'    => \'primary\',

\'theme_location\'    => \'sidebar\',
和维塞弗斯。

这应该可以奏效。

然而,您应该记住,这种设置可能会变得非常混乱。(如果你把一个错当成另一个,开始看错误的位置等)