Topic: Mega Menu in MDB Standard

nipapada free asked 4 months ago


**Expected behavior** Mega menu that expands either on click or on hover as demonstrated in the example page.

**Actual behavior** When i copy the snippet in a sample page i have creted the module does not work at all. The nav bar is shown but no menu is displayed on click or on hover

**Resources (screenshots, code snippets etc.)**

MDB Trial

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.1.0/mdb.min.css" rel="stylesheet" />

<div class="collapse navbar-collapse" id="navbarExample2">
  <ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem">
    <li class="nav-item">
      <a class="nav-link" href="#">Regular link</a>
    </li>
    <li class="nav-item dropdown position-static">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
        data-mdb-toggle="dropdown" aria-expanded="false">
        Mega menu
      </a>
      <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="
                      border-top-left-radius: 0;
                      border-top-right-radius: 0;
                    ">
        <div class="container">
          <div class="row my-4">
            <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
              <div class="list-group list-group-flush">
                <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                  Lorem ipsum
                </p>
                <a href="" class="list-group-item list-group-item-action">Dolor sit</a>
                <a href="" class="list-group-item list-group-item-action">Amet consectetur</a>
                <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                <a href="" class="list-group-item list-group-item-action">Adipisicing elit</a>
              </div>
            </div>
            <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
              <div class="list-group list-group-flush">
                <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                  Explicabo voluptas
                </p>
                <a href="" class="list-group-item list-group-item-action">Perspiciatis quo</a>
                <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                <a href="" class="list-group-item list-group-item-action">Laudantium maiores</a>
                <a href="" class="list-group-item list-group-item-action">Provident dolor</a>
              </div>
            </div>
            <div class="col-md-6 col-lg-3 mb-3 mb-md-0">
              <div class="list-group list-group-flush">
                <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                  Iste quaerato
                </p>
                <a href="" class="list-group-item list-group-item-action">Cras justo odio</a>
                <a href="" class="list-group-item list-group-item-action">Est iure</a>
                <a href="" class="list-group-item list-group-item-action">Praesentium</a>
                <a href="" class="list-group-item list-group-item-action">Laboriosam</a>
              </div>
            </div>
            <div class="col-md-6 col-lg-3">
              <div class="list-group list-group-flush">
                <p class="mb-0 list-group-item text-uppercase font-weight-bold">
                  Cras justo odio
                </p>
                <a href="" class="list-group-item list-group-item-action">Saepe</a>
                <a href="" class="list-group-item list-group-item-action">Vel alias</a>
                <a href="" class="list-group-item list-group-item-action">Sunt doloribus</a>
                <a href="" class="list-group-item list-group-item-action">Cum dolores</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>


TOL pro answered 4 months ago


Is there any tutorial on mega menus that are written in the latest MDB version? Because i can't find anywhere an example of it..


Kamila Pieńkowska staff commented 4 months ago

No we did not create new tutorials. Previous are usable after changing syntax according to migration guide linked below.


Kamila Pieńkowska staff answered 4 months ago


This is example that used syntax that we've changed in major release of version 7.0.0 This example need to be changed to v7 syntax. To assist with this transition, we've prepared a comprehensive Migration Guide.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No