所以,我有一个网站,在顶部有一个主导航栏,在侧栏有一个辅助导航栏。辅助导航在主导航中包含相同的链接,但子页面有下拉菜单。它在桌面上运行得很好,但当导航崩溃时,我会在顶部看到两个导航栏,基本上显示相同的内容。所以,我在想,对于移动设备,由于侧栏导航只是主导航的更详细版本,我只需要将主导航中的菜单替换为侧栏中的菜单,然后隐藏侧栏。
本质上,我需要切换侧边栏菜单位置,移动与不同的菜单。但是,我有点困惑于如何做到这一点。
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 -->