Warum funktioniert das Mega-Menü bei Mobirise M4-Themes nicht?

Kurzfassung: M4 nutzt Bootstrap 4 (jQuery-basiert), dein Mega-Menü nutzt Bootstrap 5 (Vanilla JS). Unterschiedliche Data-Attribute, JS-Events und Popper-Versionen → Inkompatibel.

1) Kernursache

Dein Code verwendet Bootstrap-5-Syntax (data-bs-*), während M4-Themes auf Bootstrap 4 + jQuery setzen (data-* ohne bs). Dadurch werden Dropdowns/Collapse in M4 nicht initialisiert.

2) Wesentliche Unterschiede

Funktion	Bootstrap 4 (M4)	Bootstrap 5 (M5)
Dropdown-Attribut	`data-toggle="dropdown"`	`data-bs-toggle="dropdown"`
Collapse-Attribut	`data-toggle="collapse"` + `data-target`	`data-bs-toggle="collapse"` + `data-bs-target`
JS-Architektur	jQuery + Popper v1	Vanilla JS + Popper v2
Positionierung	Anderes Verhalten der Dropdowns	Neue Berechnung/Optionen
CSS-Klassen	teils andere/alte Selektoren	aktualisierte Klassen & Utilitys

3) Option A – Menü an M4 (BS4) anpassen

Ersetze alle Bootstrap-5-Attribute durch BS4-Äquivalente und stelle die Script-Reihenfolge sicher.

Attribute anpassen

<!-- Von BS5 nach BS4 -->
<!-- Dropdown -->
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Mega Menü</a>

<!-- Collapse -->
<button class="navbar-toggler" type="button"
        data-toggle="collapse" data-target="#navbarContent">…</button>

Scripts (Reihenfolge)

<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/popper/popper.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

Hinweis: Entferne manuell gesetzte .show-Klassen an Dropdowns – Bootstrap 4 steuert das selbst.

4) Option B – Auf M5-Theme wechseln

Wenn du moderne Features (Mega-Menü, Flex-Ausrichtung, data-bs-*) willst, nutze ein M5-Theme.

Bootstrap 5.1+ Kein jQuery-Zwang Popper v2 Utility-Klassen

Vorteil: Dein vorhandener Code funktioniert nahezu unverändert.

5) Option C – BS5 zusätzlich in M4 einbinden (nicht empfohlen)

Das parallele Laden von BS4 (M4) und BS5 führt zu doppelten Styles/Handlern und Seiteneffekten (Konflikte bei Navbar/Dropdown). Nur für Experten mit Namespacing/Sandboxing.

6) Bonus – Mobile Zentrierung fixen

Falls Menüpunkte mobil „nach links springen“, zentriere Nav/Dropdown explizit:

@media (max-width: 991px){
  .navbar-collapse,
  .navbar-nav,
  .navbar-nav .nav-link{
    text-align:center !important;
    justify-content:center !important;
    align-items:center !important;
  }
  /* Für zentriertes Mega-Menü */
  .dropdown-menu.mega-dropdown-content{
    left:50% !important;
    transform:translateX(-50%) !important;
    margin:0 auto !important;
  }
  /* Oder: vollbreit */
  /* .dropdown-menu.mega-dropdown-content{ width:100% !important; left:0 !important; transform:none !important; } */
}

Fazit

Das Mega-Menü läuft in M4 nicht, weil deine Implementierung auf Bootstrap 5 basiert, M4 aber Bootstrap 4 nutzt. Wähle entweder eine Anpassung auf BS4 (schnell und kompatibel) oder wechsle zu einem M5-Theme (zukunftssicher und wartungsarm).