So passen Sie die Menügröße in einer Navigations-App an: Tab-Leiste, mobiles Menü und Mega-Menü auf Shopify

Quick Answer: How to Adjust Menu Size in a Navigation App

Öffnen Sie die Design-Einstellungen des Menüs und ändern Sie fünf Dinge getrennt: Schriftgröße, Zeilenhöhe, Menü- bzw. Drawer-Breite, Symbolgröße und Abstand der Tippflächen. Halten Sie Tippflächen mindestens 24 × 24 CSS-Pixel groß, prüfen Sie auf einem schmalen Smartphone und nutzen Sie eigenes CSS nur, wenn es keine Einstellung gibt.

Führen Sie die folgenden fünf Schritte aus, um die Menügröße ohne Programmierung anzupassen:

1. Menütyp auswählen: Öffnen Sie Ihre Navigations-App und wählen Sie das gewünschte Layout—wie eine Tab-Leiste, einen mobilen Drawer oder ein Mega-Menü.
2. Schriftgröße festlegen: Konfigurieren Sie die Typografie separat für Hauptlinks und Unterkategorien für eine klare Hierarchie.
3. Zeilenhöhe anpassen: Erhöhen Sie den vertikalen Abstand oder setzen Sie eine Mindesthöhe (min-height), damit Links leicht mit dem Daumen angetippt werden können.
4. Breite und Symbole abstimmen: Erweitern Sie die Drawer- oder Panel-Breite für lange Kategorienamen und passen Sie die Icon-Größe an.
5. Auf schmalem Smartphone testen: Überprüfen Sie das Menü auf einem realen Gerät oder bei 320 CSS-Pixeln auf Lesbarkeit und Touch-Komfort.

What “Menu Size” Actually Means: Five Dimensions

Wenn ein Menü auf dem Smartphone unausgewogen wirkt, suchen Shop-Betreiber oft nach einem einzigen Schieberegler. Im Webdesign ist die Menügröße jedoch keine einzelne Einstellung, sondern das Zusammenspiel von fünf geometrischen Dimensionen.

Wird nur eine Dimension verändert, leidet das Gesamtbild: Größerer Text in einem zu schmalen Drawer führt zu abgehackten Wörtern. Größere Symbole ohne Anpassung der Zeilenhöhe erzeugen ein gequetschtes Menü.

Diese Maße werden in CSS-Pixeln (px) angegeben. Ein CSS-Pixel ist eine abstrakte Anzeigeeinheit von Webbrowsern, die auf hochauflösenden Smartphone-Displays mehreren physischen Gerätepixeln entspricht.

Wenn Sie zusätzlich Farben, Schriftfamilien, Hover-Zustände oder Schatten anpassen möchten, lesen Sie unseren Leitfaden dazu, wie Sie Menüfarben und Schriftarten ändern.

Why Theme Menus Often Look Too Small or Too Big on Mobile

Viele Shopify-Händler sind überrascht, dass Navigationseinstellungen im System aufgeteilt sind.

In der standardmäßigen Shopify-Verwaltung werden Menüeinträge und Linkstrukturen unter Online Store > Navigation gepflegt. Das optische Erscheinungsbild, die Typografie und das responsive Verhalten des mobilen Menüs werden jedoch ausschließlich im Theme-Editor konfiguriert (fudge.ai).

Shopify Admin
 ├── Online Store > Navigation  --> Link-Hierarchie & URLs (Inhalt)
 └── Online Store > Themes
      └── Theme Editor          --> Header-Layout & visuelle Stile (Darstellung)

Viele Shopify-Themes haben keine eigene Einstellung für die Größe des mobilen Drawers oder die Zeilenhöhe, weshalb Antworten in Community-Foren oft aus CSS-Snippets bestehen. Welche Einstellungen es gibt, unterscheidet sich von Theme zu Theme – prüfen Sie daher zuerst Ihren eigenen Theme-Editor.

Zudem verhalten sich Desktop-Header völlig anders als mobile Layouts. Wenn horizontale Links zu einem Hamburger-Menü zusammengeklappt werden, wirken auf dem Laptop austarierte Schriftgrößen auf einem Smartphone-Display oft winzig oder erdrückend groß. Erfahren Sie mehr über diese Einschränkungen in unserer Analyse über die Grenzen von Shopify-Theme-Menüs.

Adjust Tab Bar Size: Icon, Label and Bar Height

Eine fixierte Tab-Leiste am unteren Bildschirmrand platziert Kernziele direkt in Reichweite des Daumens. Ist die Leiste jedoch zu schmal, wird zielgenaues Tippen zur Geduldsprobe.

Abbildung 1: Konzeptillustration (Concept illustration) — Adjust Tab Bar Size: Icon, Label and Bar Height

In einer Navigations-App steuern Sie drei Haupteinstellungen:

1. Symbolgröße: Das Vektor-Icon für Bereiche wie Startseite, Katalog, Suche und Warenkorb.
2. Textgröße der Beschriftung: Die kurze Textbezeichnung unter oder neben dem Symbol.
3. Leistenhöhe: Die vertikale Gesamthöhe des fixierten Containers am unteren Bildschirmrand.

Wenn Sie Icons vergrößern, müssen Sie auch die Gesamthöhe der Leiste vergrößern. Bleibt die Leistenhöhe gleich, stoßen Symbole und Beschriftungen an die Containerkanten.

Halten Sie Beschriftungen extrem kurz—ideal ist ein einzelnes Wort wie “Shop”, “Suche” oder “Korb”. Zu lange Texte werden abgeschnitten oder überlappen Nachbar-Tabs. Jeder Tab benötigt eine komfortable Tippfläche. Weitere Informationen finden Sie in unserem Leitfaden über Tab-Leisten und daumenfreundliche Navigation.

Adjust Mobile Menu (Drawer) Size: Text, Row Spacing and Width

Das seitlich ausfahrende Drawer-Menü ist das Standardmuster auf Mobilgeräten. Da es Menüpunkte vertikal ordnet, erfordert die Größenabstimmung ein Gleichgewicht aus Texthierarchie, Zeilenhöhe und Breite.

1. Mehrstufige Schriftgrößen

Vermeiden Sie einheitliche Schriftgrößen für alle Ebenen. Hauptkategorien (Ebene 1) benötigen größere Schriften zur Orientierung. Unterkategorien (Ebenen 2 und 3) sollten proportional kleiner und eingerückt sein.

2. Zeilenabstand über Mindesthöhe und Padding

Liegen Links zu nah beieinander, kommt es zu Fehletippern. Nutzen Sie in Ihrer App die Regler für Min Height (Mindestzeilenhöhe) oder vertikales Item Padding. Eine Mindesthöhe stellt sicher, dass auch kurze Wörter eine verlässliche Berührungszone erhalten.

3. Drawer-Breite

Die Drawer-Breite bestimmt, wie viel Bildschirmfläche das geöffnete Menü einnimmt. Ist der Drawer zu schmal, brechen längere Kollektionsnamen unschön um.

Erhöhen Sie die Schriftgröße, sollten Sie auch den Drawer verbreitern, damit Begriffe auf eine Zeile passen. Testen Sie den Drawer stets bei 320 CSS-Pixeln (W3C Reflow). Detaillierte Architektur-Tipps finden Sie in unserem Leitfaden über Best Practices für mobile Drawer-Menüs.

Adjust Mega Menu Size on Desktop and Mobile: Columns, Headings, Images

Desktop-Mega-Menüs strukturieren umfangreiche Sortimente in mehrspaltigen Dropdowns. Die richtige Dimensionierung umfasst Panel-Breiten, Spaltenanzahl und Bildelemente.

Einspaltige vs. mehrspaltige Untermenüs

Apps unterscheiden zwischen einfachen Dropdown-Listen und breiten Panels:

• Einspaltige Untermenüs: Verwenden Sie die Submenu Width-Option, um die Breite des Panels festzulegen (Einstellung für die Untermenübreite). Dies verhindert unerwünschtes Zusammenschrumpfen oder übermäßige Breite.
• Mehrspaltige Vollbreiten-Panels: Bei komplexen Mega-Menüs justieren Sie die Gesamtbreite, um großzügige Spaltenabstände zu gewährleisten.

Mega-Menü-Dimensionen
 ├── Untermenü-Breite (Einspaltige Dropdowns)
 ├── Vollbreite-Panels (Mehrspaltige Kategorien)
 ├── Spaltenüberschriften (Visuelle Hierarchie über Unterlinks)
 └── Kategoriengrafiken (Breitenbegrenzung zur Vermeidung von Überläufen)

Hierarchie zwischen Überschriften und Unterlinks

Spaltenüberschriften leiten das Auge. Gestalten Sie Überschriften spürbar größer als darunterliegende Unterlinks, um die Lesbarkeit zu verbessern.

Kategoriengrafiken steuern

Viele Mega-Menüs binden Produkt- oder Aktionsbilder ein. Da Grafiken viel Horizontalraum beanspruchen, sollten Sie zuerst die Bildgrößen begrenzen, bevor Sie das gesamte Menüpanel verbreitern.

Smartphone-Bildschirme sind deutlich schmaler als Desktop-Panels. Prüfen Sie die mobile Version eines Mega-Menüs daher getrennt von der Desktop-Version, statt anzunehmen, dass die Desktop-Maße übernommen werden.

Pick a Size That Works for Thumbs: Tap Targets and Readability

Vermeiden Sie Schätzwerte bei der Menüdimensionierung. Barrierefreiheitsstandards und Ergonomiestudien bieten klare Vorgaben für Treffsicherheit und Lesbarkeit.

Gemäß den Web Content Accessibility Guidelines (WCAG 2.2) des W3C verlangt Erfolgskriterium 2.5.8 (Target Size Minimum, Stufe AA) für Zeigerinteraktionen eine Mindestgröße von 24 by 24 CSS pixels (W3C Target Size Minimum).

Für optimale Ergonomie auf Touchscreens fordert Kriterium 2.5.5 (Target Size Enhanced, Stufe AAA) mindestens 44 by 44 CSS pixels (W3C Target Size Enhanced). Das W3C empfiehlt, diese Mindestmaße unabhängig von Zwischenabständen einzuhalten.

Ergebnisse der Nielsen Norman Group bestätigen dies: Die physische Mindestgröße eines Touch-Ziels sollte etwa 1cm by 1cm (0.4in by 0.4in) betragen (NN/g Touch Target Size). NN/g hebt hervor, dass Ziele zuerst groß genug und erst danach gut beabstandet sein müssen.

Zusätzlich verlangt WCAG 1.4.4 (Resize Text), dass Navigationsschriften ohne Hilfsmittel um bis zu 200 Prozent vergrößert werden können, ohne dass Inhalte oder Funktionen verloren gehen (W3C Resize Text). Vertiefende Hinweise finden Sie in unserem Leitfaden für barrierefreie Navigation.

Test on a narrow screen and at larger text

Gemäß WCAG-Kriterium 1.4.10 (Reflow) müssen vertikal scrollbare Inhalte bei einer Breite von 320 CSS pixels uneingeschränkt und ohne horizontales Scrollen funktionieren (W3C Reflow).

So testen Sie Ihr angepasstes Menü:

• Öffnen Sie die Entwicklertools und stellen Sie das Browserfenster auf 320 CSS-Pixel ein.
• Klappen Sie Drawer und Untermenüs auf, um zu prüfen, ob Begriffe horizontal abgeschnitten werden.
• Erhöhen Sie den Systemtextzoom, um die Bedienbarkeit bei vergrößertem Text sicherzustellen.

When You Still Need Custom CSS (and How to Test It Safely)

Die meisten Größenanpassungen lassen sich über App-Einstellungen lösen. Greift Ihr Theme jedoch tief in Stylesheets ein oder fehlt eine spezielle Option, kann benutzerdefiniertes CSS erforderlich sein.

Beachten Sie dabei Shopifys Richtlinien:

• Theme-weiter Geltungsbereich: In den Theme-Einstellungen eingegebenes CSS gilt für alle Seiten des Onlineshops mit Ausnahme der Checkout-Seite (Shopify Adding Custom CSS).
• Zeichenlimit: Shopify begrenzt theme-weites Custom CSS streng auf 1500 Zeichen (Shopify Adding Custom CSS).
• Theme-Kopie anlegen: Shopify rät ausdrücklich dazu, vor Eingriffen in Code oder CSS ein Duplikat des Themes zu erstellen (Shopify Duplicating Themes), um Änderungen bei Darstellungsfehlern sofort rückgängig machen zu können.
• Klassennamen variieren: CSS-Klassennamen unterscheiden sich zwischen Themes erheblich. Ungeprüft aus Foren kopierte Codes führen oft zu Darstellungsfehlern.

Sehen Sie sich dieses Anleitungsvideo zur Schriftgrößenänderung in Shopify an:

Video: Eine exemplarische Anleitung zur Schriftgrößenanpassung in einem Shopify-Theme.

Troubleshooting: Size Not Changing, Text Cut Off or Wrapping

Bei Größenanpassungen treten häufig drei typische Darstellungsprobleme auf:

1. Größenänderungen werden nicht sichtbar

• Falsche Ebene bearbeitet: Prüfen Sie, ob Sie Ebene 1 oder die Unterebenen 2/3 modifiziert haben. Änderungen an Ebene 1 wirken sich nicht automatisch auf Unterebenen aus.
• Gerätevorschau prüfen: Viele Apps trennen Mobil- und Desktop-Werte. Desktop-Änderungen haben keine Auswirkung auf Smartphones.
• Browser-Cache leeren: Stylesheets werden oft zwischengespeichert. Testen Sie Änderungen in einem Inkognito-Fenster.
• CSS-Konflikte im Theme: Spezifischere Theme-Regeln können App-Stile überschreiben. Prüfen Sie das Element über die Entwickler-Tools.

2. Menütext wird abgeschnitten (Truncation)

Wie das W3C beschreibt, können Begriffe zu breit für den horizontalen Raum sein und dadurch abgeschnitten werden (W3C Resize Text).

Lösungsansätze:

• Container verbreitern: Erhöhen Sie die Drawer- oder Submenu-Breite.
• Schriftgröße mäßigen: Verringern Sie die Schriftgröße geringfügig.
• Beschriftung kürzen: Verwenden Sie prägnantere Kategorienamen.

3. Zeilenumbruch vs. Auslassungspunkte

Laut MDN Web Docs erfordert das Abschneiden mit Auslassungspunkten (...) die Kombination aus text-overflow: ellipsis, overflow: hidden und white-space: nowrap (MDN text-overflow).

Bricht Text ohne Auslassungspunkte um, handelt es sich um standardmäßigen Zeilenumbruch. Dies ist kein Fehler, solange die Zeilenhöhe den zweizeiligen Text sauber umschließt.

Abbildung 3: Konzeptillustration — Vergleich von abgeschnittenem Text im schmalen Drawer mit sauber umbrochenen Labels im angepassten Drawer.

Trade-offs: What Resizing Cannot Fix

Größenanpassungen verbessern Lesbarkeit und Ergonomie, haben jedoch klare Grenzen:

• Verlust an Informationsdichte: Größere Schriften und höhere Zeilen erleichtern das Tippen, verringern aber die Anzahl sichtbarer Links pro Bildschirm. Besucher müssen mehr scrollen.
• Überladene Menüs lassen sich nicht gesundschrumpfen: Dutzende unstrukturierte Links einfach kleiner zu machen, macht das Menü unlesbar. Hier hilft nur eine Sortimentsbereinigung, keine Miniaturschrift.
• Verlust des Shop-Kontexts: Ein Drawer über die volle Bildschirmbreite bietet zwar Platz für lange Wörter, verdeckt aber den Shop vollständig. Ein sichtbarer Rand des Hintergrunds erhält die Orientierung.
• Desktop- vs. Mobile-Ergonomie: Maße, die am Desktop funktionieren, scheitern oft auf Touchscreens. Prüfen Sie beide Geräteklassen getrennt.

Where Navi+ Fits

Bietet Ihr Shopify-Theme keine Regler für Drawer-Breiten oder Tab-Leisten, liefert Navi+ Tab Bar & Mega Menu visuelle Steuerungsmöglichkeiten für Tab Bar, Mobile Menu und Mega Menu:

• Typografie je Ebene: Font Size (in px) unabhängig für Ebene 1, Ebene 2 und Ebene 3 einstellen (Navi+ Design-Einstellungen für Ebene 1).
• Zeilenabstände und Mindesthöhen: Min Height (in px) und vertikales Item Padding für treffsichere Zeilen konfigurieren (Navi+ Design-Einstellungen für Ebene 1).
• Symbolgrößen: Icon Size (in px) für Menü-Icons über alle Ebenen hinweg steuern (Navi+ Design-Einstellungen für Ebene 1).
• Breiten für Drawer und Submenüs: Submenu Width für einspaltige Dropdowns (Einstellung für die Untermenübreite) sowie Vollbreiten für Mega-Panels justieren.
• Container-Maße: Menühöhe für Tab-Leisten und Drawer-Breite für mobile Menüs (für Mobilgeräte und Desktop) festlegen.
• Responsive Syntax: Eingabefelder unterstützen die Syntax mobile | desktop für getrennte Werte in einem Feld.
• Saubere 3-Ebenen-Struktur: Unterstützt bis zu drei Navigationsebenen für klare Orientierung ohne Verwirrung.

Hat Ihr Theme keine Einstellung für Drawer-Breite oder Tab-Leistenhöhe, können Sie mit Navi+ Tab Bar & Mega Menu Schriftgröße, Zeilenhöhe, Symbolgröße und Menübreite pro Menüebene festlegen und vor der Veröffentlichung in der Vorschau prüfen. Probieren Sie es zuerst auf einem duplizierten Theme aus.

Action Checklist

Nutzen Sie diesen 8-Punkte-Leitfaden vor der Veröffentlichung Ihrer Menüanpassungen:

• Theme duplizieren: Erstellen Sie ein Theme-Backup vor Code- oder CSS-Änderungen (Shopify Duplicating Themes).
• Mehrstufige Schriftgrößen definieren: Schriften für Hauptkategorien und Unterpunkte getrennt festlegen.
• Mindestzeilenhöhe einrichten: Padding oder Mindesthöhe für komfortable Touch-Flächen justieren.
• Containerbreite abstimmen: Drawer- oder Submenu-Breite für lange Kollektionsnamen anpassen.
• Symbole ausbalancieren: Icon-Größen proportional zur Containerhöhe skalieren.
• Touch-Ziele überprüfen: Sicherstellen, dass interaktive Elemente mindestens 24×24 CSS-Pixel messen (W3C Target Size Minimum).
• Bei 320 CSS-Pixeln testen: Responsive Ansicht ohne horizontales Scrollen bei 320 Pixeln prüfen (W3C Reflow).
• Textabschneidung prüfen: Begriffe bei 200% Vergrößerung auf unerwünschte Abbrüche kontrollieren (W3C Resize Text).

FAQ

How do I make the mobile menu text bigger without code?

Nutzen Sie die integrierten Schriftgrößen-Einstellungen Ihres Themes oder Ihrer Navigations-App. Während viele Shopify-Themes Code-Anpassungen erfordern (fudge.ai), bietet eine App wie Navi+ einen Schriftgrößen-Regler für jede Menüebene (Navi+ Design-Einstellungen für Ebene 1).

How wide should a mobile menu drawer be?

Es gibt keine feste Einheitsbreite. Der Drawer sollte schmal genug sein, um den Shop-Hintergrund zur Orientierung sichtbar zu lassen, und breit genug, um Beschriftungen bei 320 CSS-Pixeln Bildschirmbreite nicht abzuschneiden (W3C Reflow).

How big should menu tap targets be?

Gemäß WCAG 2.2 AA müssen Tippflächen mindestens 24 mal 24 CSS-Pixel groß sein (W3C Target Size Minimum). Stufe AAA empfiehlt 44 mal 44 CSS-Pixel (W3C Target Size Enhanced). Die Nielsen Norman Group empfiehlt physisch rund 1cm mal 1cm (NN/g Touch Target Size).

Why is my menu text cut off?

Menütext wird abgeschnitten, wenn Wörter breiter als der verfügbare horizontale Containerraum sind (W3C Resize Text). Sie lösen dies durch Verbreiterung des Containers, maßvolle Schriftverkleinerung oder Textkürzung.

Do I need to duplicate my theme before adding CSS?

Ja. Shopify rät ausdrücklich zu einem Theme-Backup vor Änderungen am Theme-Code oder CSS, um Fehler jederzeit rückgängig machen zu können (Shopify Duplicating Themes).

Sources

• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Erfolgskriterium 2.5.8 für Touch-Ziele (Level AA).
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Enhanced) — Erfolgskriterium 2.5.5 für erweiterte Touch-Ziele (Level AAA).
• W3C Web Accessibility Initiative: WCAG 2.2 Resize Text — Erfolgskriterium 1.4.4 zur Textskalierung bis 200 Prozent.
• W3C Web Accessibility Initiative: WCAG 2.2 Reflow — Erfolgskriterium 1.4.10 für vertikales Scrollen bei 320 CSS-Pixeln.
• Nielsen Norman Group: Touch Target Sizes on Mobile Devices — Studie von Aurora Harley zu Touch-Dimensionen auf Mobilgeräten.
• Shopify Help Center: Duplicating Themes — Dokumentation zur Theme-Duplizierung vor Codeanpassungen.
• Shopify Help Center: Adding Custom CSS to Themes — Dokumentation zu Zeichenlimits und Wirkungsbereich von CSS in Shopify.
• fudge.ai: How to Change the Mobile Menu in Shopify — Leitfaden zur Menükonfiguration im Theme-Editor.
• MDN Web Docs: text-overflow CSS Reference — Referenzdokumentation zu text-overflow, overflow und white-space.
• Navi+ Help Center: Level 1 Design Settings — Dokumentation zu Schriftgröße, Symbolgröße und Mindesthöhen.
• Navi+ Help Center: Layout Settings — Dokumentation zu Untermenübreiten und Panel-Layouts.