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

**URL:** <https://forum.pinegrow.com/t/adding-multiple-levels-of-submenus-to-a-bootstrap-4-navigation-bar-in-your-wordpress-theme/4157>\
**Category:** Tutorials\
**Tags:** wordpress, bootstrap4\
**Created:** [May 21, 2020, 8:10am UTC](https://forum.pinegrow.com/t/adding-multiple-levels-of-submenus-to-a-bootstrap-4-navigation-bar-in-your-wordpress-theme/4157 "2020-05-21T08:10:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [May 21, 2020, 8:10am UTC](https://forum.pinegrow.com/t/adding-multiple-levels-of-submenus-to-a-bootstrap-4-navigation-bar-in-your-wordpress-theme/4157/1 "2020-05-21T08:10:34Z")

</div>

This tutorial is now available:

> **[Adding multiple levels of submenus to a Bootstrap 4 navigation bar in your...](https://pinegrow.com/tutorials/adding-multiple-levels-of-submenus-to-a-bootstrap-4-navigation-bar-in-a-wordpress-theme-created-with-pinegrow/)**
>
> One of the Bootstrap 4 most wanted feature can now be available within your WordPress themes.

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

---

<div class="post-metadata">

**Author:** ![Farscaper](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/farscaper/32/385_2.png) [@Farscaper](https://forum.pinegrow.com/u/Farscaper)\
**Post date:** [October 8, 2020, 6:35pm UTC](https://forum.pinegrow.com/t/adding-multiple-levels-of-submenus-to-a-bootstrap-4-navigation-bar-in-your-wordpress-theme/4157/2 "2020-10-08T18:35:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [October 9, 2020, 12:31pm UTC](https://forum.pinegrow.com/t/adding-multiple-levels-of-submenus-to-a-bootstrap-4-navigation-bar-in-your-wordpress-theme/4157/3 "2020-10-09T12:31:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Farscaper](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/farscaper/32/385_2.png) [@Farscaper](https://forum.pinegrow.com/u/Farscaper)\
**Post date:** [October 25, 2020, 2:58pm UTC](https://forum.pinegrow.com/t/adding-multiple-levels-of-submenus-to-a-bootstrap-4-navigation-bar-in-your-wordpress-theme/4157/4 "2020-10-25T14:58:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sitestreet](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/sitestreet/32/41_2.png) [@sitestreet](https://forum.pinegrow.com/u/sitestreet)\
**Post date:** [November 17, 2022, 9:41am UTC](https://forum.pinegrow.com/t/adding-multiple-levels-of-submenus-to-a-bootstrap-4-navigation-bar-in-your-wordpress-theme/4157/6 "2022-11-17T09:41:04Z")

</div>

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?