Configuration
Top navigation
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
Basic configuration
Show home link
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
Home link
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
Show arrows
Field type: Select
Available values: • don't show • show
Example value:
don't show
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-arrows-show
Shows a arrow facing downwards next to the menu item if there are subcategories.
Hover effect
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
For a left-aligned top navigation, we recommend the hover effect "coloured background (excl. home link)" instead of "coloured background (incl. home link)".
Height
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
Padding left/right
Field type: Number field
Example value:
17
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-padding
Enter the desired spacing for the menu items.
Padding bottom
Field type: Number field
Example value:
1
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-padding-bottom
Enter the desired bottom spacing for the top navigation.
Margin left @Tablet (≥992px)
Field type: Number field
Example value:
1
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-margin-left
Note: This configuration is only available for the basic layout "boxed".
Margin right @Tablet (≥992px)
Field type: Number field
Example value:
1
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Basic configuration"
Technical name:
twt-nav-main-margin-right
Note: This configuration is only available for the basic layout "boxed".
Basic headers "Header 1" and "Header 2"
Width
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
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".
Colour configuration
Background colour (Navigation)
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
Border colour
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
Note: This configuration only applies to the hover effect "default".
Border colour (underline) @hover
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
Note: This configuration only applies to the hover effect "underline".
Border colour (Seperator)
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
Typography
Font family
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
Font size
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
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
Font weight @active
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
Text alignment
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
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.
Text formatting
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
Link (Home link)
Colour (Home link)
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
Colour (Home link) @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-hover
Colour (Home link) @active
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
Link
Text colour
Field type: Color picker
Example value:
#333333
Path to the configuration: Tab "Header" => Block "Top navigation" => Section "Link"
Technical name:
twt-nav-main-color
Text colour @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-hover
Text colour @active
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
Icon colour
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
Icon colour @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-hover
Icon colour @active
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
Background colour
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
Note: This configuration only applies to the hover effects "coloured background".
Background colour @hover
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
Note: This configuration only applies to the hover effects "coloured background".
Background colour @active
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
Note: This configuration only applies to the hover effects "coloured background".
Link (highlighted)
Text colour (highlighted)
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
Text colour (highlighted) @hover
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
Text colour (highlighted) @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-active
Icon colour (highlighted)
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
Icon colour (highlighted) @hover
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
Icon colour (highlighted) @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-active
Background colour (highlighted)
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
Note: This configuration only applies to the hover effects "coloured background".
Background colour (highlighted) @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-background-color-hover
Note: This configuration only applies to the hover effects "coloured background".
Background colour (highlighted) @active
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
Note: This configuration only applies to the hover effects "coloured background".
Last updated
Was this helpful?