Adding multiple levels of submenus to a Bootstrap 4 navigation bar in your WordPress theme

Tutorials
,
1

This tutorial is now available:


Have questions or comments about this tutorial? Let’s talk about it!
1 Like
2

For some reason I am unable to preview drop-down menus at all. I’m starting with a Bootstrap nav bar page but they don’t function for testing even with JS turned on.

3

I guess there is an issue with the multilevel js script from the tutorial and the jQuery version.
From the script, can you please try to replace all $ with jQuery like this:

/* multilevel navigation for Bootstrap 4 */

jQuery(document).ready(function(){
	jQuery('.dropdown-menu > li > .dropdown-menu').parent().addClass('dropdown-submenu').find(' > .dropdown-item').attr('href', 'javascript:;').addClass('dropdown-toggle');
	jQuery('.dropdown-submenu > a').on("click", function(e) {
	var dropdown = $(this).parent().find(' > .show');
	jQuery('.dropdown-submenu .dropdown-menu').not(dropdown).removeClass('show');
	jQuery(this).next('.dropdown-menu').toggleClass('show');
		e.stopPropagation();
	});
	jQuery('.dropdown').on("hidden.bs.dropdown", function() {
		jQuery('.dropdown-menu.show').removeClass('show');
	});
});

And retry?

Note: I have tested on my side, and it went well.

4

I’m afraid that I’m just not there yet for this skill level, but I did get a simpler navigation system working. So there’s hope for me if I live long enough.

1 Like
6

This looks like exactly what I need but I’m using BS5. Will this same method work for BS5 or can you give an update that will work with BS5?