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
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
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
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
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
Was this helpful?