> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/general/header/transparent-header.md).

# 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="/files/vYC8klxl9ozRHttdK6IY" 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="/files/QnLQ0sAj2BbnQ4bqoQ1q" 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="/files/cXsGPNnEAW7oixllvLwO" 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="/files/Vmqg0kLvxJ3SI4fmfYew" 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.kaliumtheme.com/general/header/transparent-header.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.