# 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.

### <mark style="color:$primary;">Supported sections</mark>

The transparent header requires a full-width section at the top of the page.&#x20;

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

* [Slideshow](https://help.fluorescent.co/stiletto/sections/theme-sections/slideshow)
* [Image hero](https://help.fluorescent.co/stiletto/sections/theme-sections/image-hero)
* [Video hero](https://help.fluorescent.co/stiletto/sections/theme-sections/video-hero)
  {% 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 %}

## Enable on home page

***

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.

## Enable on other pages

***

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 Eclipse:

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

```
````

## Add alternate logo

***

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.

&#x20;

<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>

&#x20;