Mega menu in bootstrap 4 issues

Home Forums Latest release 1.1.x + Bootstrap 4 addon Mega menu in bootstrap 4 issues

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #3759
    scot
    Participant

    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?

    #3760
    scot
    Participant

    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?

    #3761
    scot
    Participant

    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>
    
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?