> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/pages/header/transparent-header.md).

# Transparent header

Header

Make the header background transparent to display the full height of featured media sections. You can enable the transparent header on the home page and other selected pages.

***

The transparent header requires a full-width section at the top of the page.

{% columns %}
{% column width="41.66666666666667%" %}
**Supported sections include**:

* [Slideshow](/stiletto/sections/theme-sections/slideshow.md)
* [Image hero](/stiletto/sections/theme-sections/image-hero.md)
* [Video hero](/stiletto/sections/theme-sections/video-hero.md)
  {% endcolumn %}

{% column width="58.33333333333333%" %}
{% hint style="info" %}
**Important**

Set the **Top padding** to `0px`. Click the section and scroll to the bottom the find the settings.
{% endhint %}
{% endcolumn %}
{% endcolumns %}

***

### <mark style="color:$primary;">Enable on home page</mark>

Click the **Header** section and scroll down the the **Transparent header** settings. Check the **Enable on home page** checkbox to turn on the transparent header.

### <mark style="color:$primary;">Enable on other pages</mark>

To enable the transparent header on other pages, enter the template names separated by commas in the **Enable on additional templates** field.

Enter the full template name with the template type and name, with a period in between (ex. **`page.about`**).

The following are default templates in Stiletto:

```
404
cart
collection
list-collections
page.contact
password
product
search

```

### <mark style="color:$primary;">Add alternate logo</mark>

You may want to use a different colored logo if the section image is darker or lighter than the default header color. For example, if your default logo is black, upload a white transparent header logo to contrast with darker images or videos.

If the **sticky header** option is enabled, the header will change to the default logo and colors when the page is scrolled.

<sub><mark style="color:$info;">Click Header section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="166">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Logo image</mark></td><td>Upload a PNG image to display as your store logo when the header is transparent.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>If no logo is uploaded, change the text color of the store title for when the header is transparent.</td></tr><tr><td><mark style="color:blue;">Cart count color</mark></td><td>Set the color of the cart icon for when the header is transparent.<br><br>Use light colors for darker images and dark colors for lighter images to make sure they are clear and readable.</td></tr></tbody></table>