Mega menu in bootstrap 4 issues

[scot]

Hi,

I’m trying smartmenus out in a bootstrap 4 full-width fixed top navbar using the bootstrap 4 js and css addons. The mega menu looks great in mobile view, but not on the desktop.

The mega menu does not open under the menu item in the navbar, it opens at the left side of the page.

<li class="nav-item mega-menu">
  <a href="#">mega</a>
  <ul class="mega-menu dropdown-menu" style="margin: auto;">
    <li>
      <div class="container">
        <div class="row">
          <div class="col">
            some content here
          </div>
        </div>
      </div>
    </li>
  </ul>
</li>

If I add the “dropdown” class to the parent LI, then the menu opens under the menu item but it is skinny, like a regular dropdown:

<li class="nav-item dropdown mega-menu">
  <a href="#">mega</a>
  <ul class="mega-menu dropdown-menu" style="margin: auto;">
    <li>
      <div class="container">
        <div class="row">
          <div class="col">
            some content here
          </div>
        </div>
      </div>
    </li>
  </ul>
</li>

I want the desktop mega menu to be responsive and sized properly using bootstrap 4 grid css.

Do you have any tips, what am I missing?

Thanks for all your hard work in developing this menu, I hope I can use it!

Oh, on an aside, after I started calling smartmenus js, the menu links stopped being dropdown toggles, the href=”#” would reload the page. Any ideas about that?

[scot]

One thought- is it possible that things are different because your bootstrap plugin is based on beta 1 and now beta 2 (4.0.0-beta.2) is in use?

[scot]

One more note- I verified that the smartmenus bootstrap 4 plugin breaks the dropdown toggles in bootstrap 4 beta 2 when they are UL’s instead of default bootstrap DIV’s.

That is, this drop down won’t toggle, it follows the href=”#” instead:

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

However this one, basic bootstrap, does toggle as expected:

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

[Author]

Posts