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


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


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


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


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


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

Logo

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH