Zenit Design - Themes
Theme kaufenThemesSupport
DE
DE
  • Erste Schritte
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tipps
    • Dashboard
    • Theme Konfiguration
    • Lexikon
    • Mehrere Verkaufskanäle
  • Vorlagen
  • Support
    • Error auslesen
    • Ursache finden
  • 🎨Styling
    • Allgemein
      • Grundlayout
      • Produktbilder
      • Produkt Layout-Typ
      • Globales Hintergrundbild
      • Preloader
      • Akzentlinie
      • Scroll Animation
    • Typografie & Farben
      • Theme-Farben
      • Status-Ausgaben
      • Schriftarten
      • Typografie
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Suche
      • Top Bar
      • Shop Navigation
      • Main Navigation
      • Flyout Navigation
      • Dropdown Navigation
    • Footer
      • Footer
      • Inhalte
      • Spalten
      • Spalten Styling
      • Unterer Footer
    • Elemente
      • Sidebar
      • Sidebar Navigation
      • Formulare
      • Bild- & Galerie-Slider
      • Produkt Slider
      • Kategorie Listing Slider
      • Paginierung
      • Breadcrumbs
      • Cookie Banner
      • Offcanvas
      • Backdrop
      • Scroll-Up Button
    • Kategorie
      • Kategorie-Header
      • Hero Sektion
      • Filter
      • Listing Actions
      • Produkt-Boxen
      • Quickview
    • Produkt
      • Details
      • Galerie
      • Beschreibung
      • Beschreibung Navigation
      • Beschreibung Inhalt
    • Kasse
      • Warenkorb
      • Kasse
  • ⚙️Einstellungen
    • Grundeinstellungen
    • Zusatzfeld Zuweisung
      • Zusatzfelder für Details auf der Produktseite
      • Zusatzfelder für Produkt-Datenblätter
    • Social Media Icons
    • Marketing Text Slider
    • Custom Tab Detailseite
    • Custom Spalten (Footer)
    • Eigener Code
  • 📂Inhalte
    • Erlebniswelten
      • Sektionen
      • Blöcke
        • Elemente
          • Bild Text Slider
          • Suche Banner
          • Text Banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Trenner
          • Kategorie-Navigation
          • Footer-Navigation
          • Platzhalter
        • Commerce
          • Galerie und Buybox mit Produktname & Hersteller-Logo
          • Galerie und Buybox mit Produktname & Hersteller-Logo & Beschreibung
          • Galerie und Buybox mit Beschreibung
          • Galerie mit Beschreibung und Buybox mit Produktname & Hersteller-Logo
        • Kategorie
          • Kategorie Listing
        • Spalten
        • Layouts
      • Block Innen-Abstände
      • Block Außen-Abstände
      • Animation
      • Erlebniswelt Beispiel
      • CSS-Variablen
    • Kategorieseite
      • Hero Sektion
      • Kategorie Header
      • CSS-Klassen
      • Kategorie Labels
      • Kategorie Icons
      • Produkte pro Zeile
    • Produktseite
      • Layouts
      • Standardlayout
      • Galerie Modus
      • Custom Tabs
      • Videos Tab
      • Datenblätter
    • Produktbilder
      • Bildgrößen
      • Bildformat
      • Dateiformat
      • Produktbilder Hintergrund
    • Layout-Typ
    • Responsive Tabellen
    • Mehrsprachigkeit
  • 🎓Tutorials
    • Demodaten importieren
    • Demo-Themekonfiguration importieren
    • Child-Theme duplizieren
    • Individuelle Anpassungen
    • Konfiguration export/import
    • Zusatzfelder export/import
    • Schriften lokal einbinden
    • Schriften lokal einbinden mit Child-Theme
  • 🛠️Update Guides
    • Child-Theme Update
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Shopware 6.4.8.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Übersicht
    • Barrierefreiheit
      • Typografie
      • Farben
      • Bilder
      • Video
      • Checker-Tools und Ressourcen
    • Allgemein
      • Copyright-Hinweis
      • Merkzettel
    • Produkt Layout
    • Lizenzen
      • Testversion vs Vollversion
      • Lizenzdomain ändern
    • Ableitungen
      • Child-Theme
      • Theme-Duplikat
      • Child-Theme vs Theme-Duplikat
    • Updates
      • Theme wird als inkompatibel angezeigt
      • Update wird nicht angezeigt
    • Fehler
      • Child-Theme kann nicht zugewiesen werden
      • Textbausteine zeigen technischen Namen
      • Theme Speichern Fehler
      • SVG Logo wird nicht angezeigt
      • Suche / Input mobile Zoom
      • Text ist nicht sichtbar / lesbar
Powered by GitBook
On this page
  • Grundeinstellungen
  • Rahmen oben
  • Menü Elemente
  • Kategorie Icons

Was this helpful?

  1. Styling
  2. Header

Main Navigation

Main Navigation (Kategorien)

Last updated 4 months ago

Was this helpful?

Grundeinstellungen

Aktiviere oder Deaktiviere den häufig redundanten Home-Link (1) im Menü um Platz zu sparen. Du kannst auch entscheiden, ob dieser einen Aktiv-Status (2) erhalten soll, wenn man die Startseite des Shops besucht.

Über die Ausrichtung (3) kannst Du die Menüpunkte horizontal ausrichten und verteilen. Die Trenner (4) Einstellung unterteilt die einzelnen Menü-Elemente mit einem Trennzeichen.

Wähle aus 13+ Hover Animation (5) die passende Animation für Deinen Shop aus.

Der Scroller (6) sorgt optional dafür, dass Kategorien der Main Navigation nicht umbrechen können - egal wie viele Hauptkategorien Du abbilden möchtest. Auf mobilen Geräte mit Toucheingabe kann horizontal gescrollt werden, auf Desktop-Geräten können mit Hilfe der Pfeile (1, 2) die weiteren Kategorien erreicht werden.

Beispiel:

Die Option Unternavigation Aussehen (7) bietet die Möglichkeit das Flyout-Menü durch ein einfaches Dropdown-Menü auszutauschen.

Beispiel:

Mit der Option Service-Navigation anzeigen mobile (8) kann die Service-Navigation in de mobile Offcanvas-Menü angezeigt werden.

Beispiel:

Rahmen oben

Wahlweise kann die Main-Navigation vom oberen Header-Bereich durch eine Trennlinie (Border) abgehoben werden.

Mit Hilfe der Einstellung Volle Breite (1) kannst Du die Linie auf die volle Header-Breite strecken. Damit läuft die Linie je nach gewähltem Grundlayout bis an den Browserrand und wird nicht durch die maximale Inhaltsbreite beschränkt.

Beispiel:

Menü Elemente

Über die Option Pfeile (1) kannst Du kleine Pfeile neben den Kategorien darstellen, die angezeigt werden, wenn eine Kategorie Unterkategorien besitzt, siehe Beispiel 1.

Den Abstand zwischen den einzelnen Kategorien setzt Du mit Abstand links/rechts (3). Solltest Du sehr viele Kategorien verwenden, reduzieren den Abstand zwischen den Kategorien.

Beispiel 1:

Beispiel 2:

Kategorie Icons

ab Theme Version 4.7.0

Über die Zusatzfelder unter Kataloge > Kategorien > [Kategorie auswählen] im Tab "Weitere" findest Du ein Medienfeld Kategorie Icon zum Hinterlegen des Kategorie Icons.

Über die Checkbox Icon (1) aktivierst Du die Darstellung der Icons im Hauptmenü und stellst die Größe (2) der Icons für das jeweilige Menü ein. In der mobilen Darstellung wird das Hauptmenü als mobiles Offcanvas-Menü angezeigt. Auch hier kannst Du über eine Checkbox Icon mobile (2) bestimmen, ob Kategorie Icons in diesem Menü angezeigt werden sollen. Im Feld Größe (4) hinterlegst Du die Größe des Bildes in Pixeln.

Beispiel:

Weitere Einstellungen zur Dropdown-Navigation können im Abschnitt Header > Main Navigation > gemacht werden.

Icon bei externen Links (4) (ab Theme Version 2.4.3) zeigt das bekannte "Externer Link" Icon bei Kategorien des Typs "Link" an, wenn dieser durch den Haken als externer Link eingestellt wurde. Damit wissen Deine Besucher ganz genau, was passiert, wenn sie auf einen solches Link klicken, siehe Beispiel 2.

🎨
"In neuem Tab öffnen"
Dropdown Navigation
Menu-Scroller - Pfeil
Menu-Scroller - Pfeil zum Zurückscrollen
Dropdown-Menü
Pfeile bei Kategorien mit Unterkategorien
Externer Link mit "Externer Link"-Icon
Kategorie Icons im mobilen Offcanvas Menü