# Configuration

## Basic configuration

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Header 1.1 (Top bar – Logo + Search + Action buttons – Navigation)\
• Header 1.2 (Top bar – Search + Logo + Action buttons – Navigation)\
• Header 2.1 (Top bar + Action buttons – Logo – Navigation)\
• Full-width sticky header (Logo + Navigation + Action buttons)

**Example value**:\
`Header 1.1 (Top bar – Logo + Search + Action buttons – Navigation)`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Basic configuration"

**Technical name**:\
`twt-header-type`

{% hint style="info" %}
Various layouts are available for the header. In addition to the "Basic headers" for maximum compatibility with third-party plugins ("Header 1" and "Header 2"), ThemeWare® offers you a compact but more modified "Custom header", the "Full-width sticky header".

**Important:** Please check the layout type of the search and the position of the USP bar because these depend on the selected header.
{% endhint %}

***

### Margin top @Desktop (≥992px)

**Field type**:\
Number field

**Example value**:\
`0`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Basic configuration"

**Technical name**:\
`twt-header-margin-top`

***

### Padding top

**Field type**:\
Number field

**Example value**:\
`10`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Basic configuration"

**Technical name**:\
`twt-header-padding-top`

***

### Padding bottom

**Field type**:\
Number field

**Example value**:\
`20`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Basic configuration"

**Technical name**:\
`twt-header-padding-bottom`

## Basic headers "Header 1" and "Header 2"

***

### Width

**Field type**:\
Select

**Available values**:\
• Container-Max-Width (Full-width-boxed)\
• 100% (Full-width)

**Example value**:\
`Container-Max-Width (Full-width-boxed)`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Basic headers "Header 1" and "Header 2""

**Technical name**:\
`twt-header-width`

{% hint style="info" %}
Select the sizing mode of the header.
{% endhint %}

***

### Height

**Field type**:\
Number field

**Example value**:\
`40`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Basic headers "Header 1" and "Header 2""

**Technical name**:\
`twt-header-height`

## Custom header "Full-width sticky header"

***

### Maximum width

**Field type**:\
Number field

**Example value**:\
`1200`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Custom header "Full-width sticky header""

**Technical name**:\
`twt-custom-header-nav-max-width`

## Colour configuration

***

### Background colour @Phone (landscape) (≥576px)

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Colour configuration"

**Technical name**:\
`twt-header-background-color-desktop`

***

### Background colour (Action buttons) @Desktop

**Field type**:\
Color picker

**Example value**:\
`rgba(255, 255, 255, 0)`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Colour configuration"

**Technical name**:\
`twt-header-actions-background-color`

## Background-image

***

### Background image

**Field type**:\
Media selection

**Example value**:\
\`\`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-header-background-image`

***

### Show background image

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`show`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-header-background-image-show`

***

### Image size

**Field type**:\
Select

**Available values**:\
• Initial size (auto)\
• Cover background completely (cover)\
• Cover background completely (contain)

**Example value**:\
`Initial size (auto)`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-header-background-image-size`

{% hint style="info" %}
**auto**\
The auto keyword scales the background image in the appropriate direction to maintain the initial aspect ratio.

**cover**\
The image is sized to maintain its aspect ratio while filling the element's entire content box.

**contain**\
The image is sized to maintain its aspect ratio while fitting within the element's content box.
{% endhint %}

***

### Position

**Field type**:\
Select

**Available values**:\
• left, top\
• left, center\
• left, bottom\
• right, top\
• right, center\
• right, bottom\
• center, top\
• center, center\
• center, bottom

**Example value**:\
`left, top`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-header-background-image-position`

***

### Repeat

**Field type**:\
Select

**Available values**:\
• No repeat (no-repeat)\
• Horizontal and vertical (repeat)\
• Horizontal (repeat-x)\
• Vertical (repeat-y)

**Example value**:\
`Horizontal and vertical (repeat)`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-header-background-image-repeat`

***

### Attachment

**Field type**:\
Select

**Available values**:\
• Background image scrolls with the page (scroll)\
• Background image stays fixed (fixed)

**Example value**:\
`Background image stays fixed (fixed)`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Background-image"

**Technical name**:\
`twt-header-background-image-attachment`

{% hint style="info" %}
**Scroll**:\
The background image scrolls with the page.

**Fixed**:\
The background image stays fixed relative to the viewport.
{% endhint %}

## Dropdowns

***

### Font size (Dropdown)

**Field type**:\
Number field

**Example value**:\
`14`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Dropdowns"

**Technical name**:\
`twt-header-dropdown-font-size`

***

### Text colour (Dropdowns)

**Field type**:\
Color picker

**Example value**:\
`#111111`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Dropdowns"

**Technical name**:\
`twt-header-dropdown-color`

***

### Text colour (Dropdowns) @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Dropdowns"

**Technical name**:\
`twt-header-dropdown-color-hover`

***

### Border colour (Dropdowns)

**Field type**:\
Color picker

**Example value**:\
`#e0e0e0`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Dropdowns"

**Technical name**:\
`twt-header-dropdown-border-color`

***

### Background colour (Dropdowns)

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Layout" => Section "Dropdowns"

**Technical name**:\
`twt-header-dropdown-background-color`