> 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/en/content/category/overlay-header.md).

# Category header

The effect looks best when the header overlays elements of the shopping experience. This can be, for example, simple images or even slider elements as well as videos.

Examples:

![Partially transparent header overlays a slider element of the shopping experience world](/files/-MHLIFFnxaC-FH4Gc2O6)

![Transparent header overlays a section of the shopping experience world](/files/-MHLFkQQQEwv9-UWpfm4)

## Configuration per category

If you want to apply this effect to control each category individually, we have implemented custom fields in the category - this setting is located in the custom fields of your category: Catalogues > Categories > \[select category]

![Catalogues > Categories > \[select category\] > Custom fields > header](/files/7VaIUMKRfJFi8eBDR7mZ)

### Overlay header

* **Header overlay (1)** \[ Inherit | Yes | No ]
* **Header background opacity (2)** \[ Percentage value ]
* **Main navigation background opacity (3)** \[ Percentage value ]
* **Header Backdrop blur radius(4)** \[ Pixel values ] – Indicates how much elements behind the header are blurred.

### Header contrast

**Header contrast (5)** If the header is set in such a way that it overlays the elements of the shopping experience, contrast problems may arise due to the selected foreground color of the elements of the header. Therefore, choose a contrast header type:

* **Default header:** The header remains colored as defined in the theme configuration.
* **Light header - dark text:** The foreground colors become dark. Improves the contrast when bright images / elements of the shopping experiences are to be overlaid.
* **Dark header - light Text:** The foreground colors become bright. Improves the contrast when dark images / elements of the shopping experiences are to be overlaid.
* **Inverted header:** Foreground colors and background colors are swapped. The result depends heavily on the colors set in the header configuration. Depending on the colors you have set, the result varies greatly. Whether the contrast improves with light or dark images / elements of the shopping experiences also depends on your header configuration.

Examples:

<figure><img src="/files/ZjkKiy8d4f9RTHwpY2GW" alt=""><figcaption><p>Default header</p></figcaption></figure>

<figure><img src="/files/bHerIuhTm3IRahhmyFVA" alt=""><figcaption><p>Dark header - light text</p></figcaption></figure>

## Global configuration

Using the theme configuration, the settings for displaying the overlay header can also be set globally for all categories and partially overridden in the respective category.

The additional fields in the category inherit this setting by default and can also overwrite it again. This also makes it possible to exclude individual categories from these functionality.

{% hint style="info" %}
If you want to display an overlay header on all but a few categories, then you don't have to repeat these settings in each category.
{% endhint %}

### Overlay header

![Theme configuration > Tab: Category > Section: Category header > Block: Overlay header](/files/4wJYOhsXo9H5vWdAZzpW)

* **Header overlay (1)** \[ Inherit | Yes | No ]
* **Header background opacity (2)** \[ Percentage value ]
* **Main navigation background opacity (3)** \[ Percentage value ]
* **Backdrop blur radius(4)** \[ Pixel values ] – Indicates how much elements behind the header are blurred.

### Header contrast

<figure><img src="/files/lO6Pcu3CXXWDskgcp0w6" alt=""><figcaption><p>Theme configuration > Tab: Category > Section: Category header > Block: Header contrast</p></figcaption></figure>

**Header contrast (1)** If the header is set in such a way that it overlays the elements of the shopping experience, contrast problems may arise due to the selected foreground color of the elements of the header. Therefore, choose a contrast header type:

* **Default header:** The header remains colored as defined in the theme configuration.
* **Light header - dark text:** The foreground colors become dark. Improves the contrast when bright images / elements of the shopping experiences are to be overlaid.
* **Dark header - light Text:** The foreground colors become bright. Improves the contrast when dark images / elements of the shopping experiences are to be overlaid.
* **Inverted header:** Foreground colors and background colors are swapped. The result depends heavily on the colors set in the header configuration. Depending on the colors you have set, the result varies greatly. Whether the contrast improves with light or dark images / elements of the shopping experiences also depends on your header configuration.

Examples:

<figure><img src="/files/ZjkKiy8d4f9RTHwpY2GW" alt=""><figcaption><p>Default header</p></figcaption></figure>

<figure><img src="/files/bHerIuhTm3IRahhmyFVA" alt=""><figcaption><p>Dark header - light text</p></figcaption></figure>

## Combine overly header and category image

In this context, you often want to display a category image under the overlay header and possibly also display the category description (example 2). Learn more about this in the article about category images:

{% content-ref url="/pages/-MDUwsL4ydOQufE1XqY0" %}
[Hero section](/en/content/category/category-image.md)
{% endcontent-ref %}