Troubleshooting

Die häufigsten Probleme und ihre Lösungen — mit Diagnose-Kommandos für die Browser-Konsole.

Core v3.10.6 ← Zur Dokumentation

Erste Diagnose-Schritte

Bevor du tiefer einsteigst, prüfe diese vier Punkte — sie lösen die Mehrzahl aller Fälle:

  1. Menü gespeichert? Änderungen im Menü-Editor wirken erst nach Menü speichern.
  2. Cache geleert? Browser-Cache (Strg+F5) und ggf. Seiten-Cache-Plugin (WP Rocket, LiteSpeed etc.) leeren.
  3. Aktivierungsmodus geprüft? Einstellungen → SuperNav → Aktivierungsmodus — im Zweifel «Alle Menüs».
  4. Plugin-Version aktuell? Diese Seite dokumentiert Core 3.10.6. Ältere Versionen zuerst aktualisieren.
Schnelltest in der Browser-Konsole (F12):
document.querySelectorAll('.lmm-has-mega').length — Ergebnis muss > 0 sein, sonst ist das Panel am Menüpunkt gar nicht aktiv.

Panel öffnet nicht

Symptom: Hover/Klick auf den Menüpunkt zeigt kein Mega-Panel.

  • Panel-Typ auf «Kein Mega-Panel» gesetzt? → Auf «Spalten mit Icons & Beschreibungen» (oder einen anderen Typ) ändern.
  • Menü nach der Änderung gespeichert?
  • Browser-Konsole: document.querySelectorAll('.lmm-has-mega').length — muss > 0 sein.
  • Plugin-Einstellungen: Aktivierungsmodus auf «Alle Menüs» stellen.
  • JSON leer oder fehlerhaft? Ein Panel ohne gültige Spalten wird nicht gerendert — siehe JSON-Fehler.
🖼️ Screenshot: Panel-Typ-Auswahl im Menü-Editor img/ts-panel-typ.png · empfohlen 1000×500

Panel flickert beim Hover

Symptom: Panel öffnet und schliesst schnell hintereinander.

  • Schliess-Verzögerung erhöhen: Einstellungen → SuperNav → Schliess-Verzögerung → 300
  • Theme-CSS prüfen: setzt das Theme position: static !important auf <li>-Elemente?
  • Theme-Fix-CSS in style.css einfügen — siehe Theme-Kompatibilität in der Dokumentation.

Icons nicht sichtbar

Symptom: Statt Dashicons erscheinen leere Quadrate oder gar nichts.

Auf Seiten, die ohne wp_head() rendern (z. B. eigenständige Landing-Templates), fehlen die Dashicons. Sie müssen über den Theme-Filter eingebunden werden:

add_filter('taxbot_landing_lmm_head_html', function (string $html): string {
    // Dashicons für SuperNav Icons
    $dashicons_url = includes_url('css/dashicons.min.css');
    $ver           = get_bloginfo('version');
    $html .= '<link rel="stylesheet" id="dashicons-css" href="'
           . esc_url($dashicons_url) . '?ver=' . esc_attr($ver)
           . '" media="all" />' . "\n";
    return $html;
}, 5);

Test in der Browser-Konsole:

document.querySelector('link[href*="dashicons"]') ? 'Dashicons geladen' : 'fehlt'

Auf normalen WordPress-Seiten lädt das Plugin die Dashicons automatisch.

JSON-Fehler (rote Markierung im Editor)

Symptom: Das JSON-Feld zeigt eine rote Fehlermarkierung, das Panel bleibt leer.

  • Nur doppelte Anführungszeichen " verwenden, keine einfachen ' und keine typografischen „ “ « ».
  • Kein Komma nach dem letzten Element in Arrays und Objekten.
  • Button { } Formatieren nutzen — er zeigt die genaue Fehlerstelle an.
  • Beim Kopieren aus Word/Mail: Text zuerst in einen reinen Texteditor einfügen (Smart-Quotes entfernen).
Häufigste Ursache: Aus Textverarbeitungen kopierte „typografische Anführungszeichen“. JSON akzeptiert ausschliesslich ".

Badge erscheint nicht

Symptom: Das «Neu»-Badge am Item wird nicht angezeigt.

Beide Felder müssen gesetzt sein: "badge" und "badge_url".

{
  "label": "Rechnungen",
  "url": "/rechnungen",
  "badge": "Neu",
  "badge_url": "/rechnungen/neu"
}

Farben werden nicht übernommen

Symptom: Konfigurierte Farben erscheinen nicht im Frontend.

  • Priorität prüfen: Item-JSON > Spalten-JSON > Tab 🎨 > Plugin-Einstellungen. Eine höhere Ebene überschreibt die niedrigere.
  • Hex-Farbe korrekt mit # schreiben: "#ef4444", nicht "ef4444".
  • Seiten-Cache leeren — Farbwerte landen im gerenderten HTML.

Details: Farben konfigurieren in der Dokumentation.

Panel zu weit rechts oder links

Symptom: Das Panel ragt über den Bildschirmrand hinaus.

Das Plugin erkennt Randüberschreitungen automatisch. Falls nötig, manuell erzwingen:

/* Immer linksbündig */
.lmm-has-mega .lmm-mega-panel { left: 0 !important; right: auto !important; }

/* Immer rechtsbündig */
.lmm-has-mega .lmm-mega-panel { left: auto !important; right: 0 !important; }

Theme-Konflikte

Symptom: Layout bricht, Panel erscheint an falscher Stelle oder hinter anderen Elementen.

  • z-index-Konflikt: Header-Elemente des Themes überlagern das Panel. Test-CSS:
    .lmm-mega-panel { z-index: 99999 !important; }
  • overflow: hidden auf Header-Containern verhindert die Anzeige — auf visible setzen.
  • Für dokumentierte Theme-Fixes siehe Theme-Kompatibilität.
🖼️ Screenshot: Beispiel z-index-Konflikt (vorher/nachher) img/ts-theme-zindex.png · empfohlen 1200×500

Übersetzungen greifen nicht

Symptom: Trotz eingetragener EN/FR/IT-Texte erscheint Deutsch.

  • URL-Parameter prüfen: die Sprache wird über ?lang=en / ?lang=fr / ?lang=it gesteuert.
  • Nach jeder Menü-Änderung im Übersetzungs-Modul erneut Laden klicken — neue JSON-Texte müssen neu gescannt werden.
  • Import-Modus beachten: Zusammenführen behält bestehende Keys, Ersetzen überschreibt alles.
  • Menütitel (Top-Level) werden separat im 🌐-Feld des Menü-Editors übersetzt, nicht im Modul.

Workflow im Detail: Mehrsprachigkeit (i18n).

Nach Update: alte Darstellung

Symptom: Nach einem Plugin-Update sieht das Panel noch aus wie vorher.

  • Browser-Cache hart leeren (Strg+F5).
  • Seiten-Cache-Plugin leeren (alle Seiten).
  • CDN-Cache (Cloudflare etc.) purgen — CSS/JS-Assets werden versioniert, aber HTML kann gecacht sein.
  • Bei Optimierungs-Plugins (Autoptimize, WP Rocket): aggregierte CSS/JS-Dateien neu generieren lassen.

Weiterhin Probleme?

Wenn keiner der Punkte hilft, sammle bitte folgende Angaben und melde dich beim Support:

  • Plugin-Version (Core, ggf. Pro) — siehe Plugins → Installierte Plugins
  • WordPress-Version und aktives Theme
  • Browser-Konsolen-Ausgabe (F12 → Console) beim Öffnen des Menüs
  • Das JSON des betroffenen Menüpunkts (Copy/Paste)

Support kontaktieren Zur Dokumentation

Pro-Kunden erhalten Prioritäts-Support mit garantierter Antwortzeit — mehr zu SuperNav Pro.