# Transparent Header

This option enables the header to blend seamlessly with the background of the page, making it appear as though it is floating over the content. This effect is achieved by setting the header's background to transparent, allowing the underlying page content or background image to be visible through the header.

To enable the *Transparent Header*, navigate to **Appearance → Customize → Header** and activate the **Transparent Header** option. Click on the option to access and adjust its settings.

***

#### Spacing

Control the top spacing of the page content to prevent it from being hidden behind the transparent header.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FCdw2zsj5eMyls2cMNy2x%2FHeader%20Transparent%20-%20Spacing.png?alt=media&#x26;token=8b4adf3a-c471-4ef7-8fab-aec07fa5cae8" alt="" width="349"><figcaption><p>Content Spacing Placeholder</p></figcaption></figure>

This responsive option allows you to set different spacing values for desktop, tablet, and mobile devices. The spacing creates padding at the top of the page wrapper to accommodate the header height.

***

#### Custom Logo

Use a different logo specifically for the transparent header state.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FLFOdk3bhZJU9omxbwDEB%2FHeader%20Transparent%20-%20Logo.png?alt=media&#x26;token=16c03e33-d301-4786-b4c9-ff3eb5eb9c2c" alt="" width="349"><figcaption><p>Custom Logo</p></figcaption></figure>

**Custom Logo**\
Enable this option to display a different logo image when the transparent header is active. This is useful when you need a logo with better contrast against varying background colors or images.

**Logo Image**\
When Custom Logo is enabled, select or upload your preferred transparent header logo image.

**Logo Width**\
Set a custom width for the transparent header logo. This responsive option allows you to define different widths for desktop, tablet, and mobile devices.

***

#### Display Conditions

Control where and when the transparent header appears on your website.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FSZKH7n9e4MwVi0eE2IQJ%2FHeader%20Transparent%20-%20Display%20Conditions.png?alt=media&#x26;token=31457640-6892-4f2a-8762-0de23b1de0b5" alt="" width="349"><figcaption><p>Display Conditions</p></figcaption></figure>

Set up rules to determine on which pages the transparent header will be displayed. You can create multiple conditions using various criteria such as page types, specific pages, post categories, and more.

{% hint style="info" %}
**Important:** You must set at least one display condition to enable the transparent header. Without any conditions defined, the transparent header will not be activated.
{% endhint %}

***

#### Styling

You can apply custom styling for the transparent header to ensure optimal visibility and aesthetics against your page backgrounds. Here are the options and their usage:

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FAmajDHMOzlxm4FyYuExk%2FHeader%20Transparent%20-%20Style.png?alt=media&#x26;token=cb02e00c-54f1-495b-885c-c1e1e4f4b100" alt="" width="350"><figcaption><p>Style Options</p></figcaption></figure>

**Menu**

**Links**\
Set the colors for the normal, hover, and active states of the main menu items.

**Hamburger Menu**\
Configure the colors for the normal, hover, and active states of the hamburger menu icon (mobile menu trigger).

**Text**\
Set the color for other text elements within the transparent header.

**Pill Navigation**

If pill navigation is enabled in your header settings, you can customize the appearance of pills for the transparent header state.

**Background**\
Apply custom pill background colors for normal, hover, and active states.

**Color**\
Set custom pill text colors for normal, hover, and active states.

**Submenu**

**Background**\
Set the background color for dropdown submenus when the transparent header is active.

**Pill Background**\
If pill navigation is enabled, configure the pill background colors for submenu items in normal, hover, and active states.

**Links**\
Set the colors for submenu links in normal, hover, and active states.

**Border**\
Configure the border style, width, and color for dropdown submenus.