# Transparent header

Make your store's header transparent on your Home page and collection pages to display the full height of your [Slideshow](https://help.fluorescent.co/spark/pages/theme-sections/slideshow) or [Video hero](https://help.fluorescent.co/spark/pages/theme-sections/video-hero).

<figure><img src="https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2FtkOs2XUFQxqajEUYuORF%2Fimage.png?alt=media&#x26;token=29000383-ba80-4340-83ef-dd27cdafe6d4" alt=""><figcaption></figcaption></figure>

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

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

   > Ensure that you have a Slideshow or Video hero section as the first section on your homepage.
3. Choose the colors (**Text color**, **Icon color**, **Cart count color**, and **Border color**) that should be used for the header content.

   > These colors will need to contrast with your slides or video to ensure visibility.
4. Use the **Border opacity** slider to make the border more or less visible.

   > *0* is completely invisible and *10* is completely opaque.
5. Add a **Logo image** to be used specifically with the transparent header.

   > Use an edited logo image with alternate colors to contrast with your slideshow images. For example, you may need a dark-colored version of your logo to look good on light-colored backgrounds.

   > This image only displays when the header is transparent. Your main logo image will automatically display when the header is no longer transparent.
6. Click **Save**.

</details>

## Settings reference

Click on the **Header** section to find the following settings:

| Setting             | Description                                                                                                                                                                                                               |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable on home page | Select this checkbox to enable the transparent header feature on the home page. This setting requires that you have a Slideshow or Video Hero section enabled as the first section on your homepage.                      |
| Text color          | Select a color for all text in your header. Make sure the text is readable against your top-most home page section's background colors, images, or video.                                                                 |
| Icon color          | Select a color for all icons in your header. We recommend using the same color you used for your Text color.                                                                                                              |
| Cart count color    | Select a color for the number that shows the amount of products in the cart. This color needs to contrast with the Icon color.                                                                                            |
| Border color        | Select a color for the border that defines the bottom edge of your header. The Border opacity needs to be above 0% to appear.                                                                                             |
| Border opacity      | Use the slider to set the border opacity: where 0% is invisible and 100% is completely opaque.                                                                                                                            |
| Logo image          | Select or upload a logo image to be used on the transparent header. This logo is only used when the header is shown as a transparent header. The settings for your normal logo appears at the top of the header settings. |

<br>

***

> **Related links**
>
> [Header](https://help.fluorescent.co/spark/header/header)