> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/handbuch/header/top-navigation-flyout/konfiguration.md).

# Konfiguration

### Top-Navigation Flyout

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Shopware-Standard\
• ThemeWare® Flyout\
• ThemeWare® Dropdown\*\
• ThemeWare® Flyout mit Karten\
• ThemeWare® Flyout mit Sidebar\
• ThemeWare® Flyout mit Teasern

**Beispiel Wert**:\
`ThemeWare® Flyout`

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

**Technischer Name**:\
`twt-nav-main-flyout`

{% hint style="info" %}
Wähle, wie die Untermenüs der Top-Navigation dargestellt werden.

Jede Kategorie kann diese globale Einstellung über das Kategorie-Zusatzfeld "Top-Navigation Flyout" individuell übersteuern.
{% endhint %}

<figure><img src="/files/6AWgOqNe7njrY1LsVBnQ" alt=""><figcaption><p>ThemeWare® Dropdown</p></figcaption></figure>

<figure><img src="/files/BRnk8b6PxRUFj0p2mq1X" alt=""><figcaption><p>ThemeWare® Flyout mit Karten</p></figcaption></figure>

<figure><img src="/files/BScJerySAwS7hMl6z98m" alt=""><figcaption><p>ThemeWare® Flyout mit Sidebar</p></figcaption></figure>

<figure><img src="/files/pMovsOrd7Yn6OWJiGzM4" alt=""><figcaption><p>ThemeWare® Flyout mit Teasern</p></figcaption></figure>

{% hint style="info" %}
**\*) Hinweis**: Derzeit nicht im "Full-Width Sticky-Header" verfügbar.
{% endhint %}

{% hint style="info" %}
**Hinweis**: In der Darstellungsart "ThemeWare® Flyout mit Karten" werden Kategorien vom Typ "Ordner" nicht angezeigt, weil jede Karte ein Ziel benötigt.
{% endhint %}

## Design

***

### Flyout

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Liste\
• Liste (Shopware 6)\
• Liste in Spalten (Shopware 5)\
• Buttons

**Beispiel Wert**:\
`Liste`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Design"

**Technischer Name**:\
`twt-nav-main-flyout-design`

{% hint style="info" %}
Wähle das Design des Flyouts aus.

**Liste (Shopware 6)**: Eine Linie links neben den Kategorien sorgt für eine klare Struktur im Flyout.

**Liste**: Statt der Linie von Shopware 6 werden – wie in ThemeWare® für Shopware 5 – Pfeile vor den Kategorien dargestellt.

**Liste in Spalten (Shopware 5)**: Die Kategorien werden wie im Flyout von Shopware 5 in Spalten angeordnet, die Links behalten die Pfeile vom Design "Liste". Das Design wirkt nur im Flyout – "Flyout mit Karten", "Flyout mit Sidebar" und "Flyout mit Teasern" behalten das Design "Liste".

**Buttons**: Jede Kategorie erhält eine eigene Fläche mit abgerundeten Ecken. Die Farben der Flächen legst du im Bereich "Farben" fest.

**Hinweis**: Das Shopware 5 Layout wird nicht empfohlen wenn die Anzahl der Unterkategorien stark schwankt.
{% endhint %}

***

### Dropdown-Navigation

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Liste\
• Buttons\
• Buttons (kompakt)

**Beispiel Wert**:\
`Buttons (kompakt)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Design"

**Technischer Name**:\
`twt-nav-main-dropdown-design`

{% hint style="info" %}
Wähle das Design der Dropdown-Navigation aus.

**Liste**: Reiner Text ohne Flächen und ohne Trennlinien. Der Pfeil an Menüpunkten mit Unterkategorien bleibt.

**Buttons (kompakt)**: Jeder Menüpunkt ist eine Fläche über die volle Breite der Karte, getrennt durch Linien.

**Buttons**: Die Karte erhält einen Innenabstand, die Menüpunkte werden zu eingerückten Flächen mit abgerundeten Ecken.

**Beta**: Die Funktion kann sich in einem kommenden Update nochmal ändern, teste sie aber gerne schon einmal und sende uns dein Feedback.
{% endhint %}

## Basiskonfiguration

***

### Animation

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• keine Animation (Standard)\
• Einblenden\
• Einblenden von unten\
• Federn von unten\
• Einblenden von oben\
• Federn von oben\
• Aufklappen (3D) #beta

**Beispiel Wert**:\
`Einblenden`

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

**Technischer Name**:\
`twt-nav-main-flyout-animation`

***

### Hauptnavigations-Ebenen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• 1 Ebene\
• 2 Ebenen\
• 3 Ebenen (Standard)\
• 4 Ebenen\
• 5 Ebenen

**Beispiel Wert**:\
`3 Ebenen`

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

**Technischer Name**:\
`twt-nav-main-max-depth`

{% hint style="info" %}
Maximale Anzahl an Kategorieebenen, die in der Navigation gerendert werden (wirkt in den Modi "ThemeWare® Flyout", "ThemeWare® Dropdown" und "ThemeWare® Flyout mit Sidebar").

Wird maximal bis zu den "Hauptnavigations-Ebenen" des Sales-Channels gerendert (Admin → Verkaufskanäle → \[Kanal] → Navigation), tiefere Kategorien werden nicht in die Storefront geladen.
{% endhint %}

## Basiskonfiguration 'ThemeWare® Flyout'

***

### Größenmodus

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Container-Max-Width (Full-width Boxed)\
• 100% (Full-width)\
• Boxed\
• Individuelle Breite

**Beispiel Wert**:\
`Container-Max-Width (Full-width Boxed)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'"

**Technischer Name**:\
`twt-nav-main-flyout-sizing-mode`

{% hint style="info" %}
Wähle, ob das Flyout die Containerbreite oder die volle Seitenbreite nutzt.
{% endhint %}

***

### Individuelle Breite

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`100%`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'"

**Technischer Name**:\
`twt-nav-main-flyout-width`

{% hint style="info" %}
Lege die Breite für das Flyout fest.

**Standard**: 100%

Ein Wert ungleich 100% wird als max-width genutzt. Das Flyout erstreckt sich in diesem Fall über die volle Breite wird jedoch nicht größer als der gewählte Wert.

**Beispiel**: 1080px
{% endhint %}

***

### Schlagschatten

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• kein Schatten\
• Kleiner Schatten\
• Normaler Schatten\
• Größerer Schatten\
• Weicher Schatten (ThemeWare®)

**Beispiel Wert**:\
`Weicher Schatten (ThemeWare®)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'"

**Technischer Name**:\
`twt-nav-main-flyout-box-shadow-type`

{% hint style="info" %}
Schlagschatten der Flyout-Fläche.

Die abgestuften Schatten entsprechen denen der Dropdown-Navigation, sind oben aber zusammengezogen, damit über der Navigationsleiste nichts hervorschaut — das Flyout liegt ja bündig darunter.

**Weich (ThemeWare®)** ist der bisherige ThemeWare®-Schatten: breit und weich.
{% endhint %}

***

### Einrückung

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`10`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'"

**Technischer Name**:\
`twt-nav-main-flyout-categories-margin-left`

{% hint style="info" %}
Lege die Einrückung für Unterkategorien im Flyout (in Pixeln) fest.

**Standard**: 20
{% endhint %}

## Basiskonfiguration 'ThemeWare® Flyout mit Karten'

***

### Spalten

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Automatisch\
• 3 Spalten\
• 4 Spalten\
• 5 Spalten\
• 6 Spalten

**Beispiel Wert**:\
`Automatisch`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout mit Karten'"

**Technischer Name**:\
`twt-nav-main-flyout-cards-columns`

{% hint style="info" %}
Lege fest, wie viele Karten nebeneinander dargestellt werden. Der Wert gilt für sehr große Bildschirme, kleinere Bildschirme reduzieren die Anzahl automatisch: auf Desktops maximal 4 Karten, auf Tablets maximal 3 und auf Smartphones immer 2.

**Automatisch**: 4 Karten ab großen Bildschirmen — im Größenmodus "100% (Full-width)" 6 Karten ab sehr großen Bildschirmen.

**Hinweis**: Die Einstellung wirkt nur im Modus "ThemeWare® Flyout mit Karten".
{% endhint %}

## Basiskonfiguration 'ThemeWare® Dropdown'

***

### Schlagschatten

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• kein Schatten (Standard)\
• Kleiner Schatten (Bootstrap)\
• Normaler Schatten (Bootstrap)\
• Größerer Schatten (Bootstrap)

**Beispiel Wert**:\
`Normaler Schatten (Bootstrap)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Dropdown'"

**Technischer Name**:\
`twt-nav-main-dropdown-box-shadow-type`

{% hint style="info" %}
Fügt den Submenüs einen Schlagschatten hinzu.

**Beta**: Die Funktion kann sich in einem kommenden Update nochmal ändern, teste sie aber gerne schon einmal und sende uns dein Feedback.
{% endhint %}

## Farbkonfiguration

***

### Textfarbe (Menüpunkte)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

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

**Technischer Name**:\
`twt-nav-main-flyout-categories-color`

***

### Textfarbe (Menüpunkte) @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

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

**Technischer Name**:\
`twt-nav-main-flyout-categories-color-hover`

***

### Textfarbe (Menüpunkte) @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

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

**Technischer Name**:\
`twt-nav-main-flyout-categories-color-active`

***

### Hintergrundfarbe (Menüpunkte)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

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

**Technischer Name**:\
`twt-nav-main-flyout-categories-background-color`

{% hint style="info" %}
Färbt die Fläche eines einzelnen Menüpunkts.

**Hinweis**: Im Flyout wird diese Einstellung nur angewendet, wenn das Design "Buttons" gesetzt ist. In der Dropdown-Navigation wird sie in den Designs "Buttons (kompakt)" und "Buttons" angewendet.
{% endhint %}

***

### Hintergrundfarbe (Menüpunkte) @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e3e8ec`

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

**Technischer Name**:\
`twt-nav-main-flyout-categories-background-color-hover`

{% hint style="info" %}
Färbt die Fläche eines Menüpunkts beim Überfahren mit der Maus.

**Hinweis**: Im Flyout wird diese Einstellung nur angewendet, wenn das Design "Buttons" gesetzt ist. In der Dropdown-Navigation wird sie in den Designs "Buttons (kompakt)" und "Buttons" angewendet.
{% endhint %}

***

### Hintergrundfarbe (Menüpunkte) @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e3e8ec`

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

**Technischer Name**:\
`twt-nav-main-flyout-categories-background-color-active`

{% hint style="info" %}
Färbt die Fläche des Menüpunkts der aktiven Kategorie. Beim Überfahren mit der Maus greift die Hover-Farbe.

**Hinweis**: Im Flyout wird diese Einstellung nur angewendet, wenn das Design "Buttons" gesetzt ist. In der Dropdown-Navigation wird sie in den Designs "Buttons (kompakt)" und "Buttons" angewendet.
{% endhint %}

***

### Iconfarbe (Menüpunkte)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

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

**Technischer Name**:\
`twt-nav-main-flyout-categories-icon-color`

***

### Farbe (Trennlinie)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#bcc1c7`

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

**Technischer Name**:\
`twt-nav-main-flyout-seperator-color`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration bezieht sich auf die Trennlinie im Design "Liste (Shopware 6)" und auf die Trennlinien im Dropdown-Design "Buttons (kompakt)".
{% endhint %}

***

### Hintergrundfarbe (Panel)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eef2f5`

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

**Technischer Name**:\
`twt-nav-main-flyout-background-color`

{% hint style="info" %}
Färbt die Fläche des Untermenüs selbst: beim Flyout das breite Panel, bei der Dropdown-Navigation die Karte.
{% endhint %}

***

### Glaseffekt \[px] (Panel)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`0`

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

**Technischer Name**:\
`twt-nav-main-flyout-backdrop-effect-blur`

{% hint style="info" %}
Zeichnet den Inhalt hinter dem Panel weich und erzeugt so einen Glaseffekt im Stil von "Liquid Glass". Empfohlener Wert: 10.

**Hinweis**: Der Effekt wird nur sichtbar, wenn als Hintergrundfarbe eine halbtransparente Farbe gewählt ist.
{% endhint %}

## Level 1

***

### Schriftart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Text\
• Überschriften

**Beispiel Wert**:\
`Text`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 1"

**Technischer Name**:\
`twt-nav-main-flyout-font-family`

***

### Schriftgröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`18`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 1"

**Technischer Name**:\
`twt-nav-main-flyout-font-size`

***

### Strichstärke

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• light\
• normal\
• bold

**Beispiel Wert**:\
`normal`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 1"

**Technischer Name**:\
`twt-nav-main-flyout-font-weight`

***

### 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 Flyout" => Abschnitt "Level 1"

**Technischer Name**:\
`twt-nav-main-flyout-text-transform`

## Level 2

***

### Schriftart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Text\
• Überschriften

**Beispiel Wert**:\
`Text`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 2"

**Technischer Name**:\
`twt-nav-main-flyout-level1-font-family`

***

### Schriftgröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`16`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 2"

**Technischer Name**:\
`twt-nav-main-flyout-level1-font-size`

***

### Strichstärke

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• light\
• normal\
• bold

**Beispiel Wert**:\
`normal`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 2"

**Technischer Name**:\
`twt-nav-main-flyout-level1-font-weight`

***

### 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 Flyout" => Abschnitt "Level 2"

**Technischer Name**:\
`twt-nav-main-flyout-level1-text-transform`

## Level 3 ...

***

### Schriftart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Text\
• Überschriften

**Beispiel Wert**:\
`Text`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 3 ..."

**Technischer Name**:\
`twt-nav-main-flyout-level2-font-family`

***

### Schriftgröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`16`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 3 ..."

**Technischer Name**:\
`twt-nav-main-flyout-level2-font-size`

***

### Strichstärke

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• light\
• normal\
• bold

**Beispiel Wert**:\
`normal`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Level 3 ..."

**Technischer Name**:\
`twt-nav-main-flyout-level2-font-weight`

***

### 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 Flyout" => Abschnitt "Level 3 ..."

**Technischer Name**:\
`twt-nav-main-flyout-level2-text-transform`

## Kategorie-Button

***

### Flyout-Bar anzeigen (Kategorie-Link und dem Schließen-Button)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• oben anzeigen\
• unten anzeigen (derzeit inaktiv)

**Beispiel Wert**:\
`oben anzeigen`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"

**Technischer Name**:\
`twt-nav-main-flyout-bar-show`

{% hint style="info" %}
Die "Flyout-Bar" besteht aus einem Kategorie-Link und dem Schließen-Button.

**Bedenken hinsichtlich der Barrierefreiheit**:\
Das Deaktivieren dieser Funktion kann dazu führen, dass Teile deiner Storefront für Menschen mit Einschränkungen nicht zugänglich sind. Dies kann eine Nichteinhaltung der in deiner Gerichtsbarkeit geltenden Barrierefreiheitsgesetze darstellen (z.B. des Europäischen Rechtsakts zur Barrierefreiheit). Mit dem Deaktivieren der "Flyout-Bar" erkennst du dieses Risiko an und übernimmst die volle Verantwortung.
{% endhint %}

***

### Innenabstand oben/unten

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`15`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"

**Technischer Name**:\
`twt-nav-main-flyout-bar-padding-top-bottom`

***

### Innenabstand links/rechts

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`15`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"

**Technischer Name**:\
`twt-nav-main-flyout-bar-padding-left-right`

***

### Textfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"

**Technischer Name**:\
`twt-nav-main-flyout-bar-color`

***

### Textfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"

**Technischer Name**:\
`twt-nav-main-flyout-bar-color-hover`

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#e3e8ec`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Kategorie-Button"

**Technischer Name**:\
`twt-nav-main-flyout-bar-background-color`

## Schließen-Button

***

### Innenabstand

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`15`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Schließen-Button"

**Technischer Name**:\
`twt-nav-main-flyout-close-btn-padding`