3 Level Menus

[kreincke]

I am very impressed how easy bootscore could replace my old theme. Now I am just trying to active 3 Level menus. I know, that there is an older discussion about this topic (#267), but the eventually offered solution does not work directly:
In the penultimate answer craftwerk answered "Simply add new nav-walker to your child and override function." For not getting 'there is general wordpress error' I had to add an inc directory into bootscore-child-main and copy the class-bootstrap-5-navwalker.php file into it. Then I could expand the function.php in bootscore-child-main by the lines, craftwerk had offered in his answer.
But this solution does not have any effect.
In the ultimate answer jonwebprocoder mentioned a complete solution offered by imanishpushkar . But for activating this solution I would have to modify header.php and navbar.php and a css. file.
Now my question: Do you have any step by step tutorial, how to activate the 3 Level menus successfully? If not, do you have any hint for me, how to solve my issue? (As giving back my first blog in my bootscore based blog will become the missed turorial ;-) )
Many thanks kreincke

[crftwrk]

Yes, maybe that's not clear enough. Here is a step-by-step guide how to enable 3rd level depth nav-walker:

Add new walker

1. Create folder inc in your child's root folder
2. Copy class-bootstrap-5-navwalker.php fom main-theme folder inc to your child's folder inc
3. Open child's class-bootstrap-5-navwalker.php file and replace all content with this https://raw.githubusercontent.com/imanishpushkar/bs5-navwalker/master/navbar.php
4. Register new nav-walker in your child's functions.php:

// Register new 3 level depth nav-walker
function register_navwalker() {
  require_once('inc/class-bootstrap-5-navwalker.php');
  // Register Menus
  register_nav_menu('main-menu', 'Main menu');
  register_nav_menu('footer-menu', 'Footer menu');
}

5. Open child's header.phpand search for

<!-- 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()
));
?>

6. Set 'depth' => 2, to 'depth' => 3,

Demo: https://dev.bootscore.me, click the Theme menu-item, there you will find a 3rd level dropdown.

### Self-closing offcanvas issue #350

According to AlexWebLab/bootstrap-5-wordpress-navbar-walker#19 (comment), three level menu has an issue with self-closing offcanvas in main-theme js/theme.js, line 6.

// Close offcanvas on click a, keep .dropdown-menu open
$('.offcanvas a:not(.dropdown-toggle):not(a.remove_from_cart_button), a.dropdown-item').on('click', function () {
  $('.offcanvas').offcanvas('hide');
});

This script is used for one-pager sites to close menu on click https://bootscore.me/theme/scrollspy-onepager/ (Mobile view). Comment or remove this.

We can improve this snippet generally and it will work fine for 3 menu level depth as well as for one-pagers:

// Close offcanvas on click a, keep .dropdown-menu open
$('.offcanvas a:not(.dropdown-toggle):not(a.remove_from_cart_button), a.dropdown-item:not(.dropdown-toggle)').on('click', function () {
  $('.offcanvas').offcanvas('hide');
});

Want to create a PR?

[crftwrk]

This seems to be better:

// Close offcanvas on click a, keep .dropdown-menu open
$('.offcanvas a:not(.dropdown-toggle, .remove_from_cart_button)').on('click', function () {
  $('.offcanvas').offcanvas('hide');
});

[SebGbs]

Hello kreincke and crftwrk,
I've tried your guide, but I'm stuck at 4, where I need to include the class-bootstrap-5-navwalker.php from the child-theme in functions. I get the this error message:

"Your PHP code changes were rolled back due to an error on line 0 of file wp-content/themes/bootscore-child-main/inc/class-bootstrap-5-navwalker.php. Please fix and try saving again.

Cannot declare class bootstrap_5_wp_nav_menu_walker, because the name is already in use"

(Can I answer as I'm doing now or do I need to open a new dicussion?)

[crftwrk]

Hello,

did you made steps 1-3 correct and then added this snippet to your child's functions.php? Did you made any changes in the main-theme?

// Register new 3 level depth nav-walker
function register_navwalker() {
  require_once('inc/class-bootstrap-5-navwalker.php');
  // Register Menus
  register_nav_menu('main-menu', 'Main menu');
  register_nav_menu('footer-menu', 'Footer menu');
}

Can I answer as I'm doing now or do I need to open a new dicussion?

This discussion is fine, please open a new thread below.

[SebGbs]

Ah, I just added the require_once to an exisiting function I had for new nav menus - that might have thrown the error. It works with your snippet instead - sorry!
Thanks for the help :)

[crftwrk]

👍You‘re welcome

[kreincke]

I've now created a pull request containing your modifications. But it could perhaps be 'unusable' on your side because of two 'facts':

1.) I've created a pull request for main because I didn't know for which develop branch you want to get it. If I shall create the pull request for another branch, please tell me.

2.) I constantly replaced the content of the existing class-bootstrap-5-navwalker.php file by that of https://raw.githubusercontent.com/imanishpushkar/bs5-navwalker/master/navbar.php. The reason why I did that is, that your guideline for getting deeper menus could be reduce to
a) cp header.php into your child (if not already done)
b) increase the value of 'depth' => 2 to the maximum depth of your menu
You often mention that your work has to successfully deal with one pagers. Please check my modification with respect to that aspect.

Finally let me warrant you that I've successfully tested the content of this version with my site I am working on - with the same results I got yesterday by implementing your description manually.

If you need further preliminary work on my side feel free to contact me.

Best regards