Navigation

ThemeWare® Manual

Configuration

Basic configuration


Layout type

Field type:
Select

Available values:
• default
• Sales Promoting Navigation

Example value:
default

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Basic configuration"

Technical name:
twt-header-phone-type

The layout type "Sales Promoting Navigation" moves the navigation to the bottom of the screen for better accessibility on smartphones.

Note: Please use the layout type "default" if a third party plugin does not support the "Sales Promoting Navigation".


Maximum width (Logo) @Phone (<576px)

Field type:
Text field

Example value:
160

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Basic configuration"

Technical name:
twt-header-logo-max-width-mobile


Height (Header) @Phone (<576px)

Field type:
Text field

Example value:
50

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Basic configuration"

Technical name:
twt-header-height-mobile

Only available with the active layout type "Sales Promoting Navigation".


Fixed

Field type:
Select

Available values:
• no
• yes

Example value:
yes

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Basic configuration"

Technical name:
twt-header-phone-fixed

Colour configuration


Background colour

Field type:
Color picker

Example value:
#ffffff

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Colour configuration"

Technical name:
twt-header-phone-background-color

Action buttons


Text colour

Field type:
Color picker

Example value:
#333333

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Action buttons"

Technical name:
twt-header-phone-btn-color


Text colour @hover

Field type:
Color picker

Example value:
$sw-color-brand-primary

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Action buttons"

Technical name:
twt-header-phone-btn-color-hover


Icon colour

Field type:
Color picker

Example value:
#333333

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Action buttons"

Technical name:
twt-header-phone-btn-icon-color


Icon colour @hover

Field type:
Color picker

Example value:
$sw-color-brand-primary

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Action buttons"

Technical name:
twt-header-phone-btn-icon-color-hover


Border colour

Field type:
Color picker

Example value:
#ffffff

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Action buttons"

Technical name:
twt-header-phone-btn-border-color


Border colour @hover

Field type:
Color picker

Example value:
#ffffff

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Action buttons"

Technical name:
twt-header-phone-btn-border-color-hover


Background colour

Field type:
Color picker

Example value:
#ffffff

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Action buttons"

Technical name:
twt-header-phone-btn-background-color


Background colour @hover

Field type:
Color picker

Example value:
#ffffff

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Action buttons"

Technical name:
twt-header-phone-btn-background-color-hover

Sales Promoting Navigation


Layout type

Field type:
Select

Available values:
• default
• Clean
• Center

Example value:
default

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-nav-type


Height (Navigation) @Phone (<576px)

Field type:
Text field

Example value:
70

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-nav-height

Only available with the active layout type "Sales Promoting Navigation".


Logo position @Phone (<576px)

Field type:
Select

Available values:
• left
• center
• right

Example value:
center

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-logo-position


Background colour (Navigation)

Field type:
Color picker

Example value:
#ffffff

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-nav-background-color


Drop shadow

Field type:
Text field

Example value:
0 0 20px

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-nav-box-shadow


Shadow colour

Field type:
Color picker

Example value:
rgba(0, 0, 0, 0.1)

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-nav-box-shadow-color


Corner type (Action buttons)

Field type:
Select

Available values:
• default
• rounded corners
• round corners

Example value:
round corners

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-btn-corner-type

rounded corners
Uses the configuration "Border radius". (see "Layout" > "Layout" > "Border radius")

round corners
Uses a predefined radius for round corners.


Show home button (Action button)

Field type:
Select

Available values:
• no (default)
• yes

Example value:
no (default)

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-btn-home


Order: Home button (Action button)

Field type:
Number field

Example value:
100

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-btn-home-order


Order: Navigation button (Action button)

Field type:
Number field

Example value:
200

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-btn-navigation-order


Order: Search button (Action button)

Field type:
Number field

Example value:
300

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-btn-search-order


Order: Cart button (Action button)

Field type:
Number field

Example value:
400

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-btn-cart-order


Order: Wishlist button (Action button)

Field type:
Number field

Example value:
500

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-btn-wishlist-order


Order: Account button (Action button)

Field type:
Number field

Example value:
600

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-btn-account-order


Cart button highlighting

Field type:
Select

Available values:
• no
• yes

Example value:
yes

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Layout type 'Sales Promoting Navigation'"

Technical name:
twt-header-phone-cart-btn-highlighting

Only available with the active layout type "Sales Promoting Navigation".

Basic headers "Header 1" and "Header 2"


Show hamburger menu label @Phone (<576px)

Field type:
Select

Available values:
• don't show
• show

Example value:
show

Path to the configuration:
Tab "Header" => Block "Mobile header" => Section "Basic headers ('Header 1' and 'Header 2')"

Technical name:
twt-header-phone-nav-main-toggle-label-show

Last updated on

This page online: https://docs.themeware.design/manual/header/mobile-header/configuration · ThemeWare® Service Portal, service.themeware.design