> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/styling/header/top-bar.md).

# Top Bar

Die grundlegenden Erscheinungs-Einstellungen der Top Bar findest Du im Tab "[Allgemein](/styling/allgemein.md)". Dort kannst Du einstellen, ob die Top Bar als solche dargestellt werden soll, oder zu einem Offcanvas-Element umfunktioniert werden soll, siehe Beispiele unten.

### Farben

Keine Besonderheiten

### Grundeinstellungen

**Sprachauswahl Text (3):** Stellt die Art der Darstellung der Sprachauswahl dar.\
**Sprachauswahl Flagge (4):** Kann die Darstellung der Landesflagge unterbinden.\
**Service-Navigation anzeigen (5):** Zeigt die Service-Navigation in der Top Bar an. Die Service-Navigation befindet sich optional zusätzlich im unteren Footer. Im Checkout-Footer wird die Service-Navigation immer angezeigt.\
Die Einstellung **Login- und Registrierungslinks anzeigen (6)** aktiviert die Anzeige der Links in der Top Bar.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FLgv40EB9MnccObBrrWuj%2Fdocs-de-config-theme-top-bar-basic-configuration.png?alt=media\&token=9e533b52-d458-49c7-bcc5-ef6d6eaf9de9)

Beispiele:

![Login- und Registierungslinks | Sprachauswahl mit einfachem ISO Code und Flagge](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FgGep5W7IhAB0NRg7q72i%2Fdocs-en-config-theme-top-bar-basic-configuration-example.png?alt=media\&token=58ce219e-27c6-4efc-b91b-39addb5712cc)

![Top Bar als Offcanvas Element - die Einstellung dazu befindet sich in Allgemein > Grundlayout](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-8ace26cb80b95baa6e983b32c369abce827f92c3%2Fdocs-front-header-topbar-offcanvas.jpg?alt=media)

### Logo

**Logo Größe (1)** definiert die Höhe des Logos, welches in der optionalen Offcanvas Top Bar angezeigt wird. Wird die Top Bar als klassische Zeile über dem Header abgebildet, entfällt das Logo.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FTWBbxcEHN92QqBSAGOSI%2Fdocs-de-config-theme-top-bar-offcanvas-logo.png?alt=media&amp;token=ae8d583f-190a-469b-8bb1-13542d5d909a" alt=""><figcaption></figcaption></figure>

Beispiel:

![Top Bar als Offcanvas Element mit Logo](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-8ace26cb80b95baa6e983b32c369abce827f92c3%2Fdocs-front-header-topbar-offcanvas.jpg?alt=media)

### Rahmen unten

Mit Hilfe der Option **Volle Breite (2)** 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.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-a2c32d3194ad342b1ebea89234a8598b09f07405%2Fdocs-de-config-theme-header-top-bar-border.png?alt=media" alt=""><figcaption></figcaption></figure>