Overlay header
This setting is located in the custom fields of your category: Catalogues > Categories > [select category]
You can create a very special design by overlaying the shopping experiences with a transparent or partially transparent header. In our demos we have some examples for this
Example 1:
Example 2:
Configuration per category
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.
If you want to apply this effect to control each category individually, we have implemented custom fields in the category:
Header overlay (1) [ Inherit | Yes | No ]
Header background opacity (2) [ Percentage value ]
Main navigation background opacity (3) [ Percentage value ]
Header contrast (4) [ Inherit | Default header | Light header - dark text | Dark header - light text | Inverted header ]
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.
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.
Since the settings for the transparency of the header and the main navigation are made in the fields provided for this purpose, no transparent colors should be set in the color settings of the header and the main navigation in your theme configuration.
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:
pageHero sectionLast updated
