v5 WordPress Navbar Walker

bootScore 5.0.2.0 replaces the modified Bootstrap 4 WP Bootstrap Navwalker with a real Bootstrap 5 WordPress Navbar Walker.

bootScore 5.0.2.0 is a major update with changes in header.php and footer.php and no backward compatibility. When updating the parent theme via theme uploader you must change code for nav-walker in both files if you use them in your in child-theme or using the bootCommerce-child.

What is a nav-walker?

A nav-walker is required to create menus in WordPress and display them in the theme. In order to use menus with Bootstrap nav and navbar components, WordPress needs a custom bootstrap-nav-walker to handle menus.

Since there was no nav-walker for Bootstrap 5 ready to now, bootScore has used a Bootstrap 4 nav-walker which I modified with some workarounds to get main- and footer-menu work correctly.

AlexWebLab created the first nav-walker for Bootstrap 5 and I implemented in the theme. This nav-walker is incredible tiny and simple. So, less code, better performance, more stable and more options to dropdown alignment.

Update

1. Backup your site and upload theme via theme uploader.
2. If you are using the bootCommerce child or using a copy of header.php and/or footer.php in your child, you must replace the snippets below in both files.
3. Go in Backend to Appearance > Menus and reassign your menus to main-menu and footer-menu.

header.php

Find:

<!-- Wp Bootstrap Nav Walker -->
<?php
    wp_nav_menu( array(
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'div',
        'container_class'   => 'ms-auto',
        'container_id'      => 'bootscore-navbar',
        'menu_class'        => 'nav navbar-nav justify-content-end',
        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
        'walker'            => new WP_Bootstrap_Navwalker(),
    ) );
?>

Replace:

<!-- Bootstrap 5 Nav Walker Main Menu -->
<?php
    wp_nav_menu(array(
        'theme_location' => 'main-menu',
        'container' => false,
        'menu_class' => '',
        'fallback_cb' => '__return_false',
        'items_wrap' => '<ul id="bootscore-navbar" class="navbar-nav ms-auto %2$s">%3$s</ul>',
        'depth' => 2,
        'walker' => new bootstrap_5_wp_nav_menu_walker()
    ));
?>
<!-- Bootstrap 5 Nav Walker Main Menu End -->

footer.php

Find:

<!-- Footer Menu -->
<?php
    wp_nav_menu( array(
        'theme_location'    => 'secondary',
        'depth'             => 1,
        'container'         => 'div',
        'container_class'   => 'bs-footer-menu',
        'container_id'      => 'footer-menu',
        'menu_class'        => 'nav',
        'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
        'walker'            => new WP_Bootstrap_Navwalker(),
    ) );
?>  
<!-- Footer Menu -->

Replace:

<!-- Bootstrap 5 Nav Walker Footer Menu -->
<?php
    wp_nav_menu(array(
        'theme_location' => 'footer-menu',
        'container' => false,
        'menu_class' => '',
        'fallback_cb' => '__return_false',
        'items_wrap' => '<ul id="footer-menu" class="nav %2$s">%3$s</ul>',
        'depth' => 1,
        'walker' => new bootstrap_5_wp_nav_menu_walker()
    ));
?>
<!-- Bootstrap 5 Nav Walker Footer Menu End -->

What else?

• Did you see already the new kitchen sink with all Bootstrap components?
• New translation: Swedish, thnx to Emil Lindén