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".