Bug with toggle buttons for multiple mega menus in navbar

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

linx pro premium priority asked a year ago

I used the code snippet for a mega menu from https://mdbootstrap.com/docs/standard/design-blocks/navigation/, 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("hide.bs.dropdown");

                for (let mega of megas) {

            for (let mega of megas) {
                mega.addEventListener("show.bs.dropdown", 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 a year ago

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

linx pro premium priority answered a year 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
  • User: Pro
  • 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