Dropdown not working with other nav bar

[kwright]

Greetings,

I’ve added smartmenus 1.1.1 to a Bootstrap 4 template for Zen Cart. However, the dropdown menus I’ve created are not working with the existing menus from the template.

I’ve narrowed the issue to the following simplified markup taken from the template I am using. This is what breaks the smartmenus:

<nav class="navbar navbar-expand-lg">
    <ul class="navbar-nav">  
        <li class="nav-item dropdown">
            <a href="#">Dropdown</a>
            <div class="dropdown-menu">
                <ul>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </li>  
    </ul>
</nav>

To isolate the issue from the template, I inserted the above markup in the “SmartMenus Bootstrap 4 Addon (Navbar)” demo page on my localhost where you would see that it breaks the demo page dropdown menus (no dropdown on hover and the menu will not expand when selected, either in mobile or full screen mode).

I’m new to using both Bootstrap and Smartmenus. Any help with this would be much appreciated!

[admin]

Sorry for the late reply! Unfortunately, it’s getting harder and harder for me to find any time for the forums. 🙁

You will need to tweak your nav HTML structure (it currently has some missing required classes, etc.). The following should work fine:

<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link</a></li>
    </ul>
  </li>
</ul>

[kwright]

No problem. Thank you for your reply, appreciate your help!

So it looks like the HTML that is being used within the Zen Cart bootstrap template is structured incorrectly? Is it invalid HTML per bootstrap?

I moved the dropdown-menu class from the div to the ul tag to reflect your changes, but left the div tags. Would this be valid bootstrap 4 markup? Why do the div tags break Smartmenus 🙁?

<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a href="#">Dropdown</a>
   <div>
    <ul class="dropdown-menu">
      <li><a href="#">Link</a></li>
    </ul>
   </div>
  </li>
</ul>

I would like to have the author over at Zen Cart who created the bootstrap template update the structure because I’m trying to get Smartmenus incorporated in to it for the rest of the community to use!

It would be nice if I could reference a bootstrap 4 document that shows they are structuring their HTML incorrectly. However, I can’t seem to find any reference about not putting div’s around a ul/ li structure since I believe it’s valid HTML5 markup.

Thanks again for your help and suggestions!

[admin]

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.

[kwright]

Yes, it’s coming from the Zen Cart template I wish to use. I may just replace the entire top navigation bar within the template with a Smartmenus nav bar rather then tweak the code to work alongside Smartmenus.

Thanks again for your help. Looking forward to the next release of Smartmenus!

[HalianRonaldo]

I was facing the same issue on my site https://essays.uk. You can use the following and I think it’ll help you.

<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a href="#">Link</a></li>
    </ul>
  </li>
</ul>

[Author]

Posts