# 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](/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 %}

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/stiletto/pages/header/transparent-header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.