# Header

The header section appears at the top of your website. It comprises:

1. [Site slogan](/content-authoring/site-wide-configuration/header/site-slogan.md)
2. [Header logos](/content-authoring/site-wide-configuration/header/logo.md)
3. [Secondary navigation](/content-authoring/site-wide-configuration/header/seconday-navigation.md)
4. [Primary navigation](/content-authoring/site-wide-configuration/header/navigation.md)

### Configuring the Header

When you apply the Theme, it's applied to all four above mentioned sections of the header.

To apply the `Light` or `Dark` theme to the Header go to `/admin/appearance/settings/<site-name>` and use the radio buttons.

In this section you can also configure the Logo type.

<div align="left"><figure><img src="/files/uFYjI5dCpz7UAWeIwpSx" alt="" width="375"><figcaption></figcaption></figure></div>

### Header examples

The examples below illustrate the `Light` and `Dark` theme applied to the header.

**Note:** the below examples only illustrate the Light and Dark theme, these don't give examples of the Header logo options. Go to the [Header logo](/content-authoring/site-wide-configuration/header/logo.md) page for more logo examples.

#### Light theme desktop

<figure><img src="/files/b7PTVL10Gz24JwgHvAxK" alt=""><figcaption><p>Light theme desktop Header with Logo set to Default</p></figcaption></figure>

#### Light theme mobile

<div align="left"><figure><img src="/files/NPlTahxeehUNysGLPx5g" alt="" width="375"><figcaption><p>Light theme mobile Header with Logo set to Default</p></figcaption></figure></div>

<div align="left"><figure><img src="/files/H658SHA41ftpJUgdmWiQ" alt="" width="375"><figcaption><p>Light theme mobile Header with Logo set to Stacked</p></figcaption></figure></div>

#### Dark theme Inline (logo) desktop

<figure><img src="/files/nQE2F4B5yRIG0cJTywMg" alt="Screenshot of CivicTheme dark themed header"><figcaption><p>Dark theme desktop Header with Logo set to Inline</p></figcaption></figure>

#### Dark theme Inline (logo) mobile

<div align="left"><figure><img src="/files/ag1MYEuFjy2VXpWFlVR3" alt="" width="375"><figcaption><p>Dark theme mobile Header with Logo set to Inline</p></figcaption></figure></div>

#### Dark theme Inline stacked (logo) desktop

<figure><img src="/files/P8EemRn33MwauRC4M5fK" alt=""><figcaption><p>Dark theme desktop Header with Logo set to Inline stacked</p></figcaption></figure>

#### Dark theme Inline stacked (logo) mobile

<div align="left"><figure><img src="/files/kJ9fp1yWJl47qfDyYue3" alt="" width="375"><figcaption><p>Dark theme mobile Header with Logo set to Inline stacked</p></figcaption></figure></div>


---

# 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://docs.civictheme.io/content-authoring/site-wide-configuration/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.