# Header

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

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

### 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="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-6e073a64bef95d8a74f635bc4a79a71a7969e7f3%2Fheader-theme.png?alt=media" 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](https://docs.civictheme.io/content-authoring/site-wide-configuration/header/logo) page for more logo examples.

#### Light theme desktop

<figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-d9e8bef145b916afbbc2253adc3228397cfbf81d%2Fheader-light-default-desktop.png?alt=media" alt=""><figcaption><p>Light theme desktop Header with Logo set to Default</p></figcaption></figure>

#### Light theme mobile

<div align="left"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-19252c596a14f246de370f70459a12dfcc86560a%2Fheader-light-default-mobile.png?alt=media" alt="" width="375"><figcaption><p>Light theme mobile Header with Logo set to Default</p></figcaption></figure></div>

<div align="left"><figure><img src="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-d81ecc085506c65d234ef7533fa57a9105e7de00%2Fheader-light-stacked-mobile.png?alt=media" 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="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-a24bdc6afea860ea192d432b46e7cd2bc2105b42%2Fdark-header.png?alt=media" 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="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-33052189a38276e645ba6ff3c4e9e8db4d1b96e4%2Fheader-dark-inline.png?alt=media" 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="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-adedfc6abfe926739ad17b208804c03febae3931%2Fheader-dark-inline-stacked-desktop.png?alt=media" 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="https://3596844540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F79QhtrrFEncRGId6RF6A%2Fuploads%2Fgit-blob-b097c616c110a9c09979775a0f4a0261feb48da0%2Fheader-dark-inline-stacked-mobile.png?alt=media" alt="" width="375"><figcaption><p>Dark theme mobile Header with Logo set to Inline stacked</p></figcaption></figure></div>