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.

Before — too many items wrap to a second line Home Shop Categories Sale Blog About Contact Support ⚠ The second row pushes page content down, and the header height changes unpredictably across screen sizes. After — "Menu overflow navigation" keeps it on one row Home Shop Categories Sale Blog › About Contact Support Items that don't fit (About, Contact, Support...) live behind the arrow button — click to reveal them, without wrapping.
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.

Setting → Layout → Desktop ↔ Mobile switch breakpoint Screen width below which the menu switches to mobile 768 px › Menu overflow navigation Show navigation arrows when the menu overflows Both cards only appear for a Desktop Mega Menu — not Tabbar, FAB, Slide, or Mobile Mega Menu.
Default — fixed at 768px Mobile / Hamburger Desktop Mega Menu 768px After setting Breakpoint = 600 (+ overflow navigation enabled) Mobile / Hamburger Desktop (new range) Desktop Mega Menu 600px 768px The 600–768px range used to be hidden as mobile — it now keeps the desktop layout.

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.

Stärke
Sie verwalten nur ein Menü – die Desktop-Version. Die mobile Kopie folgt automatisch, ohne zweiten Baum, um synchron zu bleiben.
Schwäche
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 Feld Link To des Elements auf open: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.

Desktop Mega Menu — 3 columns Collections Women Dresses Tops Men New in Sale Info Size guide Shipping → Smart responsive Slide menu — flattened to 1 column Collections Dresses Tops New in Sale Size guide Shipping one tap reaches every link
  1. Klicken Sie auf Copy embed item, um diese Menüelementvorlage zu kopieren.
  2. Fügen Sie es auf level 1 eines 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 Sie Exclude when embedded ein. 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.