new WP_Bootstrap_Navwalker() that collapses into three columns

[EllieMaffio93]

I'm working on this website with a lot of menu items. My menu collapses at 100% height in all devices, and the items inside of it are now being shown one after the other in one long column on the right.

I would like my items to be shown on three columns. I am using Wordpress, Understrap-Child theme and I think I might solve this problem by modifying the WP_Bootstrap_Navwalker(). Am I right? Is there a way to do so?

thanks!

[IanDelMar]

@EllieMaffio93 were you able to solve this? Would you like to share your code so it may help others?

[EllieMaffio93]

@IanDelMar Unfortuntaely not, I wasn't able to solve the problem.

[IanDelMar]

Ok, I had a look at it. If you don't want to change the walker class, which I guess is the case, this might be a solution: use 3 menus combined with row-cols-* and a toggle button with multiple targets.

Add this to your functions.php

function slug_register_nav_menu() {
	register_nav_menus( array(
		'primary_col_1' => __( 'Primary Menu 1st Column', 'text_domain' ),
		'primary_col_2' => __( 'Primary Menu 2nd Column', 'text_domain' ),
		'primary_col_3' => __( 'Primary Menu 3rd Column', 'text_domain' ),
	) );
}
add_action( 'after_setup_theme', 'slug_register_nav_menu', 0 );

I assume you use the default UnderStrap header.php

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'text_domain' ); ?>">
	<span class="navbar-toggler-icon"></span>
</button>

<?php
wp_nav_menu(
	array(
		'theme_location'  => 'primary',
		'container_class' => 'collapse navbar-collapse',
		'container_id'    => 'navbarNavDropdown',
		'menu_class'      => 'navbar-nav ml-auto',
		'fallback_cb'     => '',
		'menu_id'         => 'main-menu',
		'depth'           => 2,
		'walker'          => new Slug_WP_Bootstrap_Navwalker(),
	)
);
?>

change this to

<div class="row">
	<button class="navbar-toggler col-auto order-last" type="button" data-toggle="collapse" data-target=".multi-target" aria-controls="navbarNavDropdown1 navbarNavDropdown2 navbarNavDropdown3" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'text_domain' ); ?>">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="col-auto">
		<div class="row row-cols-3">
			<?php
			wp_nav_menu(
				array(
					'theme_location'  => 'primary_col_1',
					'container_class' => 'collapse navbar-collapse col multi-target',
					'container_id'    => 'navbarNavDropdown3',
					'menu_class'      => 'navbar-nav',
					'fallback_cb'     => '',
					'menu_id'         => 'main-menu',
					'depth'           => 2,
					'walker'          => new Slug_WP_Bootstrap_Navwalker(),
				)
			);

			wp_nav_menu(
				array(
					'theme_location'  => 'primary_col_2',
					'container_class' => 'collapse navbar-collapse col multi-target',
					'container_id'    => 'navbarNavDropdown2',
					'menu_class'      => 'navbar-nav',
					'fallback_cb'     => '',
					'menu_id'         => 'main-menu',
					'depth'           => 2,
					'walker'          => new Slug_WP_Bootstrap_Navwalker(),
				)
			);

			wp_nav_menu(
				array(
					'theme_location'  => 'primary_col_3',
					'container_class' => 'collapse navbar-collapse col multi-target',
					'container_id'    => 'navbarNavDropdown3',
					'menu_class'      => 'navbar-nav',
					'fallback_cb'     => '',
					'menu_id'         => 'main-menu',
					'depth'           => 2,
					'walker'          => new Slug_WP_Bootstrap_Navwalker(),
				)
			);
			?>
		</div>
	</div>
</div>

Note there are 3 menus with 3 different locations and container_ids which are wrapped in a <div>. Also note the additional classes .col and .mulit-target for container_class. And last but not least, note the changes to the buttons' aria-controls and data-target attribute.

I could not think of any other possibility without changing the walker class.

EDIT: I don't know whether this approach causes accessibility issues. I recommend to do some research and if necessary adjust the markup.

[IanDelMar]

Closing this due to lack of feedback.