Multiple Navbar Toggles

Here’s a bit of code I made recently in RCVDA’s latest redesign.

The goal was simply to have multiple Navbars that each close when another opens.

I started by adding our three toggles to “header.php”:

<div id="buttonz" style="display: flex; justify-content: center;">
	<button class="menu1"
			id="tglBtn1"
			type="button"
			data-bs-toggle="collapse"
			data-bs-target="#navbarNavDropdown1"
			aria-controls="navbarNavDropdown"
			aria-expanded="false"
			onclick="choice1()"
			aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
			style="border-bottom-color: #1A223E;
				   border-bottom-width: thick;
				   border-bottom-style: solid;">
			About
	</button>
					
	<button class="menu2"
			id="tglBtn2"
			type="button"
			data-bs-toggle="collapse"
			data-bs-target="#navbarNavDropdown2"
			aria-controls="navbarNavDropdown"
			aria-expanded="false"
			onclick="choice1()"
			aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
			style="border-bottom-color: #154284;
				   border-bottom-width: thick;
				   border-bottom-style: solid;">
			Our Work
	</button>
					
	<button class="menu3"
			id="tglBtn3"
			type="button"
			data-bs-toggle="collapse"
			data-bs-target="#navbarNavDropdown3"
			aria-controls="navbarNavDropdown"
			aria-expanded="false"
			onclick="choice1()"
			aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
			style="border-bottom-color: #DA1E19;
				   border-bottom-width: thick;
				   border-bottom-style: solid;">
			Contact
	</button>
</div>

Here you can add this bit of JavaScript right into the “header.php”:

<script type="text/javascript">
	function choice1(page)
	{
		if(document.getElementById('navbarNavDropdown1')
		   .classList.contains("show")) {
				document.getElementById('tglBtn1').click();
		   }
		   if(document.getElementById('navbarNavDropdown2')
				.classList.contains("show")) {
				document.getElementById('tglBtn2').click();
		   }
		   if(document.getElementById('navbarNavDropdown3')
				.classList.contains("show")) {
				document.getElementById('tglBtn3').click();
		   }
	}
</script>

Which clicks the other toggle buttons if they are currently showing.

Thus closing any open menu as another is opened.

Now you will want to add the extra menu locations for the second and third navbars you intend to toggle.

This can be done with a simple function in your “functions.php”:

/**
 * Adds additional menu locations.
 */
add_action( 'init', 'register_childtheme_menus' );
function register_childtheme_menus() {
	register_nav_menu('secondary', __( 'Secondary Menu', 'child-theme-textdomain' ));
	register_nav_menu('tertiary', __( 'Tertiary Menu', 'child-theme-textdomain' ));
}

Finally you can add the navbar dropdowns themselves within your “header.php”:

<div class="container" style="background-color:#1A223E;">
	<ul id="buttonbox" style="padding-left:0px; margin-bottom: 0px;">
			
		<?php wp_nav_menu(
				array(
					'theme_location'  => 'primary',
					'container_class' => 'collapse navbar-collapse',
					'container_id'    => 'navbarNavDropdown1',
					'menu_class'      => 'navbar-nav ms-auto',
					'fallback_cb'     => '',
					'menu_id'         => 'main-menu',
					'depth'           => 3,
					'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
				)
			); ?>
						
	</ul>
</div>
<div class="container" style="background-color:#154284;">
	<ul id="buttonbox" style="padding-left:0px; margin-bottom: 0px;">
			
		<?php wp_nav_menu(
				array(
					'theme_location'  => 'secondary',
					'container_class' => 'collapse navbar-collapse',
					'container_id'    => 'navbarNavDropdown2',
					'menu_class'      => 'navbar-nav ms-auto',
					'fallback_cb'     => '',
					'menu_id'         => 'main-menu',
					'depth'           => 3,
					'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
				)
			); ?>
						
	</ul>
</div>
<div class="container" style="background-color:#DA1E19;">
	<ul id="buttonbox" style="padding-left:0px; margin-bottom: 0px;">
			
		<?php wp_nav_menu(
				array(
					'theme_location'  => 'tertiary',
					'container_class' => 'collapse navbar-collapse',
					'container_id'    => 'navbarNavDropdown3',
					'menu_class'      => 'navbar-nav ms-auto',
					'fallback_cb'     => '',
					'menu_id'         => 'main-menu',
					'depth'           => 3,
					'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
				)
			); ?>
						
	</ul>
</div>

This post was mostly to remind me how I did this in the future but if it helped you let me know with a comment!