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

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.

---

Margin top @Desktop (≥992px)

Field type: Number field

Example value: 1

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

Select the sizing mode of the header.

---

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

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.

---

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

Scroll: The background image scrolls with the page.

Fixed: The background image stays fixed relative to the viewport.

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