Topic: Bug with toggle buttons for multiple mega menus in navbar

linx priority asked 3 years ago

I used the code snippet for a mega menu from, but I ran into an issue after adding multiple mega menu toggles to my navbar.

When I toggled one of the mega menus open, and then clicked on another mega menu toggle, the second menu would not open on the first try - only on the second try. I would expect the second toggle to close the first menu and open the second.

Here is the code I wrote to fix the issue. I added a class .mega-toggle to the .dropdown-toggle for the mega menus.

<script type="text/javascript">
    (function mdbMegaMenuToggleFix(document) {
        document.addEventListener("DOMContentLoaded", function () {
            const megas = document.getElementsByClassName("mega-toggle");

            function onMegaShow(event) {
                let hideEvent = new CustomEvent("");

                for (let mega of megas) {

            for (let mega of megas) {
                mega.addEventListener("", onMegaShow);

(The unexpected behavior was only happening with the mega menus. When I would toggle open a mega menu and then click a standard dropdown toggle, I got the expected behavior.)

Dawid Wajszczuk staff commented 3 years ago

Hi. Could you please provide a snippet with this issue? Thanks.

linx priority answered 3 years ago

When I strip out my CSS it behaves as expected. I guess the issue is on my end. Thanks for such a great framework!

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.5.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes