Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Reply To: Dropdown not working with other nav bar

Home Forums Latest release 1.1.x + Bootstrap 4 addon Dropdown not working with other nav bar Reply To: Dropdown not working with other nav bar

#9146
admin
Keymaster

The SmartMenus script requires any sub <ul> elements to be direct children of their parent <li> elements so, unfortunately, that extra <div> will break the script although it’s not invalid HTML. That’s just the way it was designed to support the HTML structure and this cannot be changed easily. The next major release of the script will allow much more flexible structure (relying on classes instead) but that is still quite far from being ready for public testing.

Having said that, I don’t think there is any official Bootstrap document stating what a valid/supported HTML structure is for their navbars apart from the code samples they provide in their docs. In general the SmartMenus script should work fine with a very minimal change to the code samples they provide (which is required at least in order to allow unlimited sub menus levels support). For example, if we take this official code sample from Bootstrap:

https://getbootstrap.com/docs/4.5/components/navbar/

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Only the following snippet:

        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>

would need to changed like this:

        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <div class="dropdown-divider"></div>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>

and the script should work fine.

But, as you can see, they don’t have an additional <div> wrapping their div.dropdown-menu in their code samples so I guess this is some custom code coming from the Zen Cart template developer.