# Transparent header

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/ira/readme/theme-retirement).
{% endhint %}

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/ira/sections/theme-sections/slideshow).

<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** and/or **Enable on collection pages** checkbox to turn on the transparent header.

   > Ensure that you have a Slideshow section as the first section.
3. Choose the colors (**Text color**, **Icon 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/ira/pages/header)