I'm working on adding responsive multilevel dropdown menus on the navigation bar to the ZCA Bootstrap template. I've added a dropdown button to the bar that when clicked, opens the first level dropdown. An item in this dropdown opens up a second level dropdown, but an item in the second dropdown will not open to the third level. The html follows the pattern for multilevel dropdown menu examples I can find for bootstrap 4. I'm a Bootstrap novice and would appreciate any suggestions. A sample of the relevant code follows.
Code:
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<nav class="navbar fixed-top mx-3 navbar-expand-lg rounded-bottom">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Button</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i> Level 1 Item 1</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="https://blah...blah"><i class="fas fa-caret-left"></i>Level 2 Item 1" </a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="https://blah...blah">Level 3 Item 1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
Bookmarks