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
Last updated
