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 -->
1 Answer
Reset to default 0All 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.)