FAQ
Frage 1: Wie kann ich verhindern, dass mein Desktop Mega Menu auf eine zweite Zeile umgebrochen wird?
Es gibt zwei Situationen, die das Layout einer Desktop Mega Menu-Leiste beeinträchtigen können: zu viele Elemente auf der obersten Ebene oder die Website wird in einem Fenster angezeigt, das schmäler als ein Standard-Desktop ist. Zwei Einstellungen unter Setting → Layout → Desktop beheben dies – kein Code erforderlich.
Menü-Overflow-Navigation
Schalten Sie Show navigation arrows when menu overflows ein. Die Leiste auf oberster Ebene bleibt immer in einer Reihe; Elemente, die nicht passen, sind stattdessen hinter einer ›-Pfeilschaltfläche versteckt, anstatt umzubrechen. Zwei Farbfelder, Button background color und Arrow icon color, ermöglichen es Ihnen, die Schaltfläche zu gestalten.
Mobiler Umschaltpunkt
Standardmäßig schaltet jeder Bildschirm, der schmäler als 768px ist, das gesamte Menü in den Mobilmodus, auch wenn noch genug Platz für ein Desktop-Layout vorhanden ist – häufig auf Tablets oder in vergrößerten Browserfenstern. Senken Sie das Feld Breakpoint (px) auf eine schmalere Breite, um die Desktop-Leiste sichtbar zu halten.
Der neue Bereich, den dies öffnet (zwischen Ihrem Breakpoint und 768px), ist schmäler als ein Standard-Desktop – schalten Sie auch die Menü-Overflow-Navigation ein, damit Elemente auf der obersten Ebene in diesem Bereich nicht umgebrochen werden.
Beispiel: breakpoint = 600 mit eingeschalteter Menü-Overflow-Navigation:
| Bildschirmbreite | Verhalten |
|---|---|
| Unter 600px | Mobil-/Hamburger-Menü |
| 600px – 768px | Desktop Mega Menu, Pfeilschaltfläche hält Elemente in einer Reihe |
| Über 768px | Desktop Mega Menu, Standardverhalten |
Diese beiden Einstellungen sind unabhängig und beeinflussen nur das Desktop Mega Menu – nicht Tabbar, FAB, Slide-Menü oder Mobile Mega Menu.
Frage 2: Wie kann ich mein Desktop Mega Menu auf Mobilgeräten als Slide-Menü anzeigen?
Manchmal möchten Sie den klassischen responsive Ansatz: Erstellen Sie ein Desktop Mega Menu und lassen Sie es auf Mobilgeräten automatisch in ein Slide-(Hamburger-)Menü einklappen, anstatt ein separates Mobilmenü von Grund auf zu erstellen.
Sie verwalten nur ein Menü – die Desktop-Version. Die mobile Kopie folgt automatisch, ohne zweiten Baum, um synchron zu bleiben.
Mobile-First ist die Art, wie Navigation heute gestaltet werden sollte – Telefone bringen die meisten Besuche und oft die meisten Einnahmen. Ein von einer breiten Desktop-Leiste zusammengepresstes Menü ist wirklich Desktop-First: zu viele Taps pro Link, Dropdown-Gruppen, die als gestapelte Liste schwer zu lesen sind, kein Platz für nur mobile Verknüpfungen.
Für die Hauptnavigation eines Shops ist ein von Anfang an für Mobilgeräte gestaltetes Menü – ein dediziertes Slide-, Grid- oder TabBar-Menü – normalerweise die zusätzliche Wartung wert.
Mittelweg: Spiegeln Sie das Desktop Mega Menu mit
Smart responsive(Schritte unten) in ein Slide-Menü, und fügen Sie ein TabBar-Element hinzu, das es direkt öffnet. Legen Sie das FeldLink Todes Elements aufopen:NaviMenu(SF-xxxxxxxxxx)fest (Business / Elite) – mit der Embed-ID des Slide-Menüs – damit mobile Besucher einen echten Einstiegspunkt in der unteren Leiste bekommen, anstatt eines versteckten Hamburger-Symbols.
Richten Sie Smart responsive ein
Öffnen Sie Ihr Desktop Mega Menu → Setting → Mobile → Karte Smart responsive. Es bettet einen Live-Verweis dieses Menüs in ein Slide-Menü ein – Sie bearbeiten den Inhalt hier nur noch, und die mobile Version wird automatisch aktualisiert.
- Klicken Sie auf
Copy embed item, um diese Menüelementvorlage zu kopieren. - Fügen Sie es auf
level 1eines vorhandenen Slide-Menüs ein – oder erstellen Sie zuerst eines, wenn Sie noch keines haben.
Layouts mit mehreren Spalten werden automatisch vereinfacht: Spalten werden zu einer vertikalen Liste, Spaltentitel werden gelöscht, und eine Trennlinie wird eingefügt, wo es früher separate Spalten gab – damit Besucher jeden Link in einem Tap anstelle von zwei erreichen.
Nach der Einbettung zeigt die Karte This menu already shows on mobile mit direktem Link zum Slide-Menü an, damit Sie es jederzeit überprüfen können.
Verfeinern Sie die mobile Kopie
- Desktop-Elemente ausblenden. Öffnen Sie das Element auf dem Desktop Mega Menu →
Visibility→ schalten SieExclude when embeddedein. Es bleibt auf dem Desktop und verschwindet nur aus der mobilen Kopie. - Nur mobile Elemente hinzufügen. Das Slide-Menü ist nicht auf das beschränkt, was die Referenz einbringt – fügen Sie normale Elemente der Ebene 1 direkt neben dem eingebetteten ein für Dinge, die die Desktop-Leiste nicht benötigt: eine Anruf-/WhatsApp-Schaltfläche, Öffnungszeiten, ein Sprachschalter oder Links, die normalerweise in der Theme-Kopf- oder Fußzeile angezeigt werden. Diese befinden sich direkt im Slide-Menü und berühren die Desktop-Version überhaupt nicht.