Topic: Mega Menu in MDB Standard
**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>
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 8 months ago
No we did not create new tutorials. Previous are usable after changing syntax according to migration guide linked below.
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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