# Header
### Farben
Beispiele:
### Logo
Über **Logo Position (1)** positionierst Du das Logo im Header entweder `links`, `rechts` oder in der `Mitte`. Alle weiteren Elemente des Header wie Suche, Shop-Navigation usw. ordnen sich automatisch an.
Die **Logo Größe mobile (2)** sowie **Logo Größe (3)** beschreibt die Größe des Logos in **Prozent** im Verhältnis zur **Höhe mobile (4)** bzw. **Höhe (5)** des Headers. Damit ist sichergestellt, dass das Logo nicht aus dem Header ausbrechen kann - außer Du verwendest Werte über `100%` um diesen Effekt absichtlich zu erzielen.
Beispiel:\
Ist der Header in der Desktop Ansicht `100px` hoch und das Logo `40%` groß, ergibt sich eine Größe des Logos von 40 Pixel in der Höhe - die Breite ergibt sich proportional.
### Höhen & Abstände
Die **Höhe (1, 2)** des Headers kann für die mobile Darstellung und die Variante für größere Geräte separat eingestellt werden.\
Zusätzlich können **Abstand oben (3, 4)** sowie **Abstand unten (4,5)** gesetzt werden. Dadurch können Darstellungen wie im Beispiel erzeugt werden.
Beispiel:
### Abgerundete Ecken
Beispiel:
### Rahmen unten
Der gesamte Header kann einen **Rahmen unten (1)** erhalten und so stärker vom Content abgetrennt werden. Für den Sticky-Zustand – also wenn der Header beim Herunterscrollen feststehend angezeigt wird – kann eine abweichende Einstellung über die **Felder Rahmen unten:sticky (2)** vorgenommen werden.
Beispiel:
Rahmen unten für den gesamten Header
### Schlagschatten
Der gesamte Header kann einen unteren Schlagschatten erhalten und so stärker vom Content abgetrennt werden.
Der Schlagschatten kann unterschiedlich für drei verschiedene Header-Status eingestellt werden. **Schlagschatten (1)** aktiviert den Schlagschatten für den Header im normalen Zustand. **Schlagschatten:hover (2)** aktiviert den Schlagschatten nur, wenn die Maus über den Header bewegt wird. Und **Schlagschatten:sticky (3)** aktiviert den Schatten immer dann, wenn der Nutzer nach unten scrollt und der Header fixiert dargestellt wird. Diese Funktion greift nur, wenn der Header auch als Sticky-Header, wie im folgenden erläutert, dargestellt wird.
Für die **Farbe** des Schlagschattens eignet sich in der Regel am besten ein teiltransparenter Farbton. In diesem Beispiel ist der Wert in rgba angegeben, welchen Du im Color-Picker über die Alpha-Transparenz auswählen kannst. Der Wert `rgba(0,0,0,0.1)` ist also ein reines Schwarz mit 10% Sichtbarkeit.
Die **Weite** ist in Pixel anzugeben und gibt an, wie groß der Schatten in Pixeln ist.
### Sticky Header
Das Theme beinhaltet die Funktion Sticky Header, welche den Header beim Herunterscrollen der Seite am oberen Bildschirmrand fixiert. Mit Hilfe der **Anzeigebereiche (1)** kannst Du festlegen, auf welchen Geräten der fixierte Header genutzt werden soll.
{% hint style="info" %}
Die Bildschirmfläche (Viewport) ist eine Ressource, die sinnvoll genutzt werden sollte.\
Man sollte daher nicht aus einem falsch verstandenen Usability-Ansatz davon ausgehen, dass eine Sticky-Navigation automatisch zu einer besseren Usability (Nutzbarkeit) führen. Fixierte Header verbrauchen auf dem mobilen Gerät wertvolle vertikale Bildschirmflächen und bieten dem Benutzer keinen enormen Mehrwert.
{% endhint %}
Der **manuelle Offset (2)** Wert definiert den Abstand von Oben, ab wann der Header fixiert werden soll. Lass das Feld leer, wenn der Abstand des Headers zur Oberkante des Browsers automatisch ermittelt werden soll. Der Header wird sticky, sobald der Header durch Scrollen außerhalb des sichtbaren Bereiches gerät - daraufhin wird der Header mit einer Animation erscheinen und fixiert.
* Möglichkeit 1: Wert leer lassen zur automatischen Berechnung
* Möglichkeit 2: Legt man einen Offset-Wert von `0` fest, wird der Header sofort fixiert - ohne Animation.
* Möglichkeit 3*:* Der Offset-Wert ist immer dann nützlich, wenn das Flyout-Menü oder Dropdown-Menü so viele Einträge beinhalten, dass die Einträge unterhalb des Browserrandes verschwinden. Wird nun für den Offset-Wert ein zusätzlicher Abstand z.B. `600` eingetragen, muss der Nutzer mind. `600` Pixel nach unten scrollen, bis der Header fixiert wird. Dadurch werden die Menüpunkte, die unterhalb des Browser-Falzes verschwunden sind beim Scrollen wieder erreichbar. Der Header wird erst zu einem späteren Scrollabstand fixiert.
Die **Auto Hide (3)** Funktion sorgt dafür, dass der komplette Header erst wieder sichtbar wird, wenn der Nutzer im Begriff ist nach oben zu Scrollen.
{% hint style="success" %}
Die **Auto Hide Funktion** verbessert die Usability, da so auch bei mehrzeiligen Headern oder sehr hohen einzeiligen Headern nicht permanent der [Viewport](https://themedocs.zenit.design/tipps/lexikon) künstlich verkleinert wird.
{% endhint %}
Die **Abweichende Header Höhe:sticky (4)** lässt Dich eine zusätzliche (meist geringere) **Header Höhe:sticky (5)** festlegen. Der Header kann so im Sticky Zustand auf diese abweichende Höhe schrumpfen (oder eben wachsen). Die Einstellung soll insbesondere Layouts mit ausladendem Header die Möglichkeit geben, die Sticky-Funktion nutzerfreundlich einzusetzen ohne zu viele Bereiche mit dem Sticky-Header zu überdecken.
### Checkout Minimal Header
Der Header im Checkout unterscheidet sich in Shopware vom normalen Header. Hier gibt es die Möglichkeit einen **Schlagschatten (1)** zu setzen.
Für die **Farbe** des Schlagschattens eignet sich in der Regel am besten ein teiltransparenter Farbton. In diesem Beispiel ist der Wert in rgba angegeben, welchen Du im Color-Picker über die Alpha-Transparenz auswählen kannst. Der Wert `rgba(0,0,0,0.1)` ist also ein reines Schwarz mit 10% Sichtbarkeit.
Die **Weite** ist in Pixel anzugeben und gibt an, wie groß der Schatten in Pixeln ist.
Der gesamte Checkout Header kann einen **Rahmen unten (2)** erhalten und so stärker vom Content abgetrennt werden.
.png?alt=media)
