> 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

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>