Konfiguration

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • Liste anzeigen • Hamburger-Menü anzeigen

Beispiel Wert: Liste anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation"

Technischer Name: twt-nav-main-show

Basiskonfiguration

Home-Link anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-home-link-show

Home-Link

Feldtyp: Auswahlfeld

Verfügbare Werte: • Text (Standard) • Icon

Beispiel Wert: Text (Standard)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-home-link

Pfeile anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-arrows-show

Zeigt einen Pfeil nach unten neben dem Menüpunkt, wenn Unterkategorien vorhanden sind.

Hover-Effekt

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • farbig hinterlegen (inkl. Home-Link) • farbig hinterlegen (exkl. Home-Link) • unterstreichen (mittig nach links und rechts) • unterstreichen (von links nach rechts) • unterstreichen (von rechts nach links) • unterstreichen

Beispiel Wert: farbig hinterlegen (inkl. Home-Link)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-hover-type

Bei einer links ausgerichteten Top-Navigation empfehlen wir den Hover-Effekt "farbig hinterlegen (exkl. Home-Link)" statt "farbig hinterlegen (inkl. Home-Link)".

Höhe

Feldtyp: Nummernfeld

Beispiel Wert: 60

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-height

Innenabstand links/rechts

Feldtyp: Nummernfeld

Beispiel Wert: 17

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-padding

Gebe den gewünschten Abstand für die Menüpunkte ein.

Innenabstand unten

Feldtyp: Nummernfeld

Beispiel Wert: 1

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-padding-bottom

Gebe den gewünschten Abstand nach unten für die Top-Navigation ein.

Außenabstand links @Tablet (≥992px)

Feldtyp: Nummernfeld

Beispiel Wert: 1

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-margin-left

Hinweis: Diese Konfiguration ist nur für das Grundlayout "boxed" verfügbar.

Außenabstand rechts @Tablet (≥992px)

Feldtyp: Nummernfeld

Beispiel Wert: 1

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-nav-main-margin-right

Hinweis: Diese Konfiguration ist nur für das Grundlayout "boxed" verfügbar.

Basis-Header "Header 1" and "Header 2"

Breite

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Container-Max-Width (Full-width-boxed) • 100% (Full-width)

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basis-Header "Header 1" and "Header 2""

Technischer Name: twt-nav-main-width

Wähle die Breite der "Top-Navigation" aus.

Standard: Die Breite der "Top-Navigation" orientiert sich an der Konfiguration der Breite des Headers.

Hinweis: Diese Konfiguration gilt nicht im Grundlayout "boxed".

Farbkonfiguration

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-background-color

Rahmenfarbe

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border-bottom-color

Hinweis: Diese Konfiguration gilt nur für den Hover-Effekt "Standard".

Rahmenfarbe (unterstreichen) @hover

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border-bottom-color-hover

Hinweis: Diese Konfiguration gilt nur für den Hover-Effekt "unterstreichen".

Rahmenfarbe (Trennstrich)

Feldtyp: Farbauswahl

Beispiel Wert: #cccccc

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-nav-main-border

Typografie

Schriftart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Text • Überschriften

Beispiel Wert: Text

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-family

Schriftgröße

Feldtyp: Nummernfeld

Beispiel Wert: 18

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-size

Strichstärke

Feldtyp: Auswahlfeld

Verfügbare Werte: • light • normal • bold

Beispiel Wert: bold

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-weight

Strichstärke @active

Feldtyp: Auswahlfeld

Verfügbare Werte: • light • normal • bold

Beispiel Wert: bold

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-font-weight-active

Textausrichtung

Feldtyp: Auswahlfeld

Verfügbare Werte: • links ausrichten • rechts ausrichten • zentriert ausrichten • space-between • space-around

Beispiel Wert: links ausrichten

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-justify-content

Wähle die gewünschte horizontale Ausrichtung aus.

links Elemente werden am Anfang des Containers positioniert.

rechts Elemente werden am Ende des Containers positioniert.

zentriert Die Elemente befinden sich in der Mitte des Containers.

space-between Elemente werden gleichmäßig verteilt. Das erste Element an den Start, das letzte an das Ende.

space-around Elemente werden gleichmäßig verteilt. Alle Elemente haben gleiche Abstände um sie herum.

Textformatierung

Feldtyp: Auswahlfeld

Verfügbare Werte: • keine • Großschreibung • Kleinschreibung • Wortanfang in Großbuchstaben

Beispiel Wert: keine

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

Technischer Name: twt-nav-main-text-transform

Menüpunkt (Home-Link)

Farbe (Home-Link)

Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color

Farbe (Home-Link) @hover

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color-hover

Farbe (Home-Link) @active

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

Technischer Name: twt-nav-main-home-link-color-active

Menüpunkt

Textfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color

Textfarbe @hover

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color-hover

Textfarbe @active

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-color-active

Iconfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #333333

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color

Iconfarbe @hover

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color-hover

Iconfarbe @active

Feldtyp: Farbauswahl

Beispiel Wert: $sw-color-brand-primary

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-icon-color-active

Hintergrundfarbe

Feldtyp: Farbauswahl

Beispiel Wert: rgba(255, 255, 255, 0)

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-link-background-color

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Hintergrundfarbe @hover

Feldtyp: Farbauswahl

Beispiel Wert: #eef2f5

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-background-color-hover

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".

Hintergrundfarbe @active

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

Technischer Name: twt-nav-main-background-color-active

Hinweis: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".