# Einkaufswelt überlagernden Header erstellen

In diesem Theme kannst du Deinen Header so einstellen, dass dieser auf der Startseite die Einkaufswelt überlagert und beispielsweise über einem Banner-Slider liegt.

Damit sind moderne Designs möglich, welche Du so mit keinem anderen Theme realisieren kannst.

Achte darauf, dass Du diese Option nur wählst, wenn Du auf der Startseite einen Banner oder Banner-Slider mit Hilfe der Einkaufswelt anzeigen möchtest.

1\. Stelle unter *Grundeinstellungen > Header* die Option *Header Positionierung* auf "Absolute Positionierung"

![](/files/-MNyu5vfPPvnjGoPvram)

2\. Passe unter *Typografie & Farben > Header* die Hintergrundfarbe des **Header Hintergrundes**, die Hintergrundfarbe der **Kategorien-Navigation** und die Hintergrundfarbe der **Shop-Navigation** nach Deinen Wünschen an.

Hier kannst Du mit den verschiedenen Werten sehr unterschiedliche Looks erstellen.

![](/files/-MNyurYlxzICliPu9ior)

**Achtung Transparenter Header:** Wenn Du den **Header transparent** gestalten willst, sodass die Kategorien, das Logo und die Shop-Navigation ohne Hintergrundfarbe auf dem Banner oder Banner-Slider liegen, trage bitte nicht "transparent" in das Feld für den **Header Hintergrund** ein. Die Farbe **Header Hintergrund** wird für den **Sticky Header** benötigt. Verwende die Funktion "Transparenter Header" weiter unten.

## Funktion Transparenter Header:

3\. Sollen die Kategorien, das Logo sowie die Shop-Navigation auf dem Banner Bild oder Banner-Slider Bild ohne eine Hintergrundfarbe dargestellt werden, kannst Du das unter *Grundeinstellungen > Header* im Feld *Header Transparenz* einstellen.

Achte hierzu auf ausreichenden Kontrast zu den eingestellten Bildern. 

In diesem Beispiel-Bild (unten) kann man die Farbe der aktiven Kategorie "Home" auf dem gleichfarbigen Hintergrund nicht mehr lesen. Hierzu sollte das Banner-Bild oder die aktive Farbe der Kategorien angepasst werden um die Bedienbarkeit nicht zu verschlechtern.

![](/files/-MNyuMZoXIf6HMDhKjf-)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themedocs-sw5.zenit.design/atmos/konfiguration/einkaufswelt-ueberlagernden-header-erstellen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.