# Site Header

#### Customizing ▸ Site Header ▸ Header Style

To set up your header layout, go to **Appearance ▸ Customize ▸ Site Header ▸ Header Style**. From here, you can select one of the available layouts and configure additional options.

**Header Layout Options**

* **Header | Style**\
  Choose a header layout from multiple options:\
  \&#xNAN;*Fullwidth Header, Boxed Header, Splitted Fullwidth Header, Splitted Boxed Header, Fullwidth Menu Center, Two Color Header, Fullwidth Menu Left, Left Header, Left Header Boxed, Creative Header, Overlay Header.*
* **Header | Position**\
  Set where the header appears relative to the slider: *Above Slider, On Slider, Below Slider.*
* **Header | Transparency**\
  Choose between *Semi-Transparent* or *Transparent* header options.
* **Header | Background**\
  Upload and apply a custom background image for the selected header style.

<figure><img src="/files/e5CD62POIoHbuuksmJYL" alt=""><figcaption></figcaption></figure>

***

#### **General Header Options**

* **Sticky Navigation** – Enable or disable sticky header navigation.
* **Header Position** – Set to *Above Slider* by default.
* **Header Transparency** – Choose from *Default, Semi Transparent, Transparent.*
* **Enable Dark BG** – Option to enable a dark background for the header.
* **Search Icon** – Display a search icon in the header.
* **Search Box Style** – Choose a style for the search box (*Full Screen*).
* **Cart Icon** – Show or hide the cart icon in the header.

***

#### **Top Bar Options**

* **Show Top Bar** – Enable or disable the top bar above the header.
* **Content** – Add custom content such as contact details, social media links, or widgets (shortcodes supported).
* **Customize Top Bar** – Allow customization of top bar colors.
  * **Top Bar BG Color** – Set background color.
  * **Top Bar Text Color** – Set text color.
  * **Top Bar Anchor Color** – Define link color.
  * **Top Bar Anchor Hover Color** – Define hover color for links.

***

<figure><img src="/files/FB8HHNJ2R6fsjL16x0IY" alt=""><figcaption></figcaption></figure>

#### **Header Background**

* **Customize Background** – Enable background customization for the header.
* **Background Color** – Select a solid background color.
* **Background Image** – Upload a custom background image (no image selected by default).


---

# 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://wdt-kirki.gitbook.io/wdt-kirki/theme-customizer/site-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.