Field type: Select
Available values: • don't show • show list • show hamburger menu
Example value:
show list
Path to the configuration: Tab "Header" => Block "Top navigation"
Technical name:
twt-nav-main-show
Field type: Select
Available values: • don't show • show
Example value:
show
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-home-link-show
Field type: Select
Available values: • Text (default) • Icon
Example value:
Text (default)
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-home-link
Field type: Select
Available values: • don't show • show (ThemeWare® style) • show (default)
Example value:
show (ThemeWare® style)
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-arrows-show
Field type: Select
Available values: • defatult • coloured background (incl. home link) • coloured background (excl. home link) • underline (center to left and right) • underline (from left to right) • underline (from right to left) • underline
Example value:
coloured background (incl. home link)
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-hover-type
Field type: Number field
Example value:
60
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-height
Field type: Number field
Example value:
16
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-padding
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-padding-bottom
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-margin-left
Field type: Number field
Example value:
0
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-margin-right
Field type: Select
Available values: • default • Container-Max-Width (Full-width-boxed) • 100% (Full-width)
Example value:
default
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic headers ('Header 1' and 'Header 2')"
Technical name:
twt-nav-main-width
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Colour configuration"
Technical name:
twt-nav-main-background-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Colour configuration"
Technical name:
twt-nav-main-border-bottom-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Colour configuration"
Technical name:
twt-nav-main-border-bottom-color-hover
Field type: Color picker
Example value:
#cccccc
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Colour configuration"
Technical name:
twt-nav-main-border
Field type: Select
Available values: • Text • Headlines
Example value:
Text
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-font-family
Field type: Number field
Example value:
18
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-font-size
Field type: Select
Available values: • light • normal • bold
Example value:
bold
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-font-weight
Field type: Select
Available values: • light • normal • bold
Example value:
bold
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-font-weight-active
Field type: Select
Available values: • align left • align right • align center • space-between • space-around
Example value:
align left
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-justify-content
Field type: Select
Available values: • none • uppercase • lowercase • capitalize
Example value:
none
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Typography"
Technical name:
twt-nav-main-text-transform
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (Home link)"
Technical name:
twt-nav-main-home-link-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (Home link)"
Technical name:
twt-nav-main-home-link-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (Home link)"
Technical name:
twt-nav-main-home-link-color-active
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-color-active
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-icon-color
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-icon-color-hover
Field type: Color picker
Example value:
$sw-color-brand-primary
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-icon-color-active
Field type: Color picker
Example value:
rgba(255, 255, 255, 0)
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-link-background-color
Field type: Color picker
Example value:
#eef2f5
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-background-color-hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-background-color-active
Field type: Color picker
Example value:
#ef2f3c
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-color
Field type: Color picker
Example value:
#feecee
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-color-hover
Field type: Color picker
Example value:
#ef2f3c
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-color-active
Field type: Color picker
Example value:
#ef2f3c
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-icon-color
Field type: Color picker
Example value:
#feecee
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-icon-color-hover
Field type: Color picker
Example value:
#ef2f3c
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-icon-color-active
Field type: Color picker
Example value:
rgba(255, 255, 255, 0)
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-background-color
Field type: Color picker
Example value:
#ef2f3c
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-background-color-hover
Field type: Color picker
Example value:
#ffffff
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"
Technical name:
twt-nav-main-link-highlighted-background-color-active
Shows a arrow facing downwards next to the menu item if there are subcategories.
For a left-aligned top navigation, we recommend the hover effect "coloured background (excl. home link)" instead of "coloured background (incl. home link)".
Enter the desired spacing for the menu items.
Enter the desired bottom spacing for the top navigation.
Note: This configuration is only available for the basic layout "boxed".
Note: This configuration is only available for the basic layout "boxed".
Select the sizing mode of the "Top navigation".
default: The width of the "Top navigation" is based on the configuration of the width of the header.
Note: This configuration does not apply in the basic layout "boxed".
Note: This configuration only applies to the hover effect "default".
Note: This configuration only applies to the hover effect "underline".
Select the desired horizontal alignment.
left Items are positioned at the beginning of the container.
right Items are positioned at the end of the container.
center Items are positioned at the center of the container.
space-between Items are positioned with space between them.
space-around Items are positioned with space before, between, and after them.
Note: This configuration only applies to the hover effects "coloured background".
Note: This configuration only applies to the hover effects "coloured background".
Note: This configuration only applies to the hover effects "coloured background".
Note: This configuration only applies to the hover effects "coloured background".
Note: This configuration only applies to the hover effects "coloured background".
Note: This configuration only applies to the hover effects "coloured background".