Configuration

Basic configuration

Width

Field type: Text field

Example value: 100%

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration"

Technical name: twt-nav-main-flyout-width

Set the width for the flyout (in pixels).

Default: 100%

A value not equal to 100% is automatically converted to pixels and used as a max-width. In this case, the flyout extends over the full width but will not be larger than the selected value.

Example: 1080px

Layout type

Field type: Select

Available values: • Shopware 6 • ThemeWare® • Shopware 5

Example value: ThemeWare®

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration"

Technical name: twt-nav-main-flyout-style

The Shopware 5 layout is not recommended if the number of subcategories varies significantly.

Animation

Field type: Select

Available values: • no animation (default) • back in up • fade in • swing in down

Example value: fade in

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration"

Technical name: twt-nav-main-flyout-animation

Indentation

Field type: Text field

Example value: 10

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Basic configuration"

Technical name: twt-nav-main-flyout-categories-margin-left

Set the indentation for subcategories in the flyout (in pixels).

Default: 20

Colour configuration

Text colour (Categories)

Field type: Color picker

Example value: #333333

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

Technical name: twt-nav-main-flyout-categories-color

Text colour (Categories) @hover

Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

Technical name: twt-nav-main-flyout-categories-color-hover

Icon colour (Categories)

Field type: Color picker

Example value: $sw-color-brand-primary

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

Technical name: twt-nav-main-flyout-categories-icon-color

Background colour (Categories)

Field type: Color picker

Example value: #eef2f5

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

Technical name: twt-nav-main-flyout-background-color

Text colour (Seperator)

Field type: Color picker

Example value: #bcc1c7

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Colour configuration"

Technical name: twt-nav-main-flyout-seperator-color

Note: This configuration refers to the separator line in the "Shopware 6" layout type.

Level 1

Font family

Field type: Select

Available values: • Text • Headlines

Example value: Text

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 1"

Technical name: twt-nav-main-flyout-font-family

Font weight

Field type: Select

Available values: • light • normal • bold

Example value: normal

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 1"

Technical name: twt-nav-main-flyout-font-weight

Text formatting

Field type: Select

Available values: • none • uppercase • lowercase • capitalize

Example value: none

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 1"

Technical name: twt-nav-main-flyout-text-transform

Level 2

Font family

Field type: Select

Available values: • Text • Headlines

Example value: Text

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 2"

Technical name: twt-nav-main-flyout-level1-font-family

Font weight

Field type: Select

Available values: • light • normal • bold

Example value: normal

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 2"

Technical name: twt-nav-main-flyout-level1-font-weight

Text formatting

Field type: Select

Available values: • none • uppercase • lowercase • capitalize

Example value: none

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 2"

Technical name: twt-nav-main-flyout-level1-text-transform

Level 3...

Font family

Field type: Select

Available values: • Text • Headlines

Example value: Text

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."

Technical name: twt-nav-main-flyout-level2-font-family

Font weight

Field type: Select

Available values: • light • normal • bold

Example value: normal

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."

Technical name: twt-nav-main-flyout-level2-font-weight

Text formatting

Field type: Select

Available values: • none • uppercase • lowercase • capitalize

Example value: none

Path to the configuration: Tab "Header" => Block "Top navigation flyout" => Section "Level 3..."

Technical name: twt-nav-main-flyout-level2-text-transform