new WP_Bootstrap_Navwalker() that collapses into three columns
EllieMaffio93 opened this issue · comments
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!
@EllieMaffio93 were you able to solve this? Would you like to share your code so it may help others?
@IanDelMar Unfortuntaely not, I wasn't able to solve the problem.
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.
Closing this due to lack of feedback.