Header

9 minute read

Header Background

Controls the background color and image for the header area.

  • Variable Name: header_background
  • Data Type: background

Default Values

  • units: body_background.units
  • color: body_background.color
    • image: body_background.image
  • repeat: body_background.repeat
  • x: body_background.x
  • y: body_background.y
  • gradient_type: body_background.gradient_type
  • gradient_direction: body_background.gradient_direction
  • gradient_start_color: body_background.gradient_start_color
    • gradient_mid_color: body_background.gradient_mid_color
    • gradient_end_color: body_background.gradient_end_color

Header Height

Controls the height of the header area below the Sitebuilder Navigation menu and above the main navigation tabs.

  • Variable Name: header_height
  • Data Type: size

Default Values

  • units: px
  • size: 104

Header Search Button Background

Controls the background color and image for the search button in the header.

  • Variable Name: header_search_button_background
  • Data Type: background

Default Values

  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|3, 3, 3
  • gradient_type: linear-gradient
  • gradient_direction: to bottom
  • gradient_start_color: rgba(255, 255, 255, 0.01)
    • gradient_end_color: rgba(0, 0, 0, 0.10)

Header Search Button Border

Controls the border width, style, and color for search button in the header.

  • Variable Name: header_search_button_border
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-48, -44, -42

Header Search Button Text Color

Controls the text color for the search button in the header.

  • Variable Name: header_search_button_text_color
  • Data Type: color

Default Values

  • color: global_palette_text_01.color
    • inherit_param_color: #252C2F|-40, -39, -38

Header Search Input Background

Controls the background color and image for the search box in the header.

  • Variable Name: header_search_input_background
  • Data Type: background

Default Values

  • units: form_field_background.units
  • color: form_field_background.color
    • image: form_field_background.image
  • repeat: form_field_background.repeat
  • x: form_field_background.x
  • y: form_field_background.y
  • gradient_type: form_field_background.gradient_type
  • gradient_direction: form_field_background.gradient_direction
  • gradient_start_color: form_field_background.gradient_start_color
    • gradient_mid_color: form_field_background.gradient_mid_color
    • gradient_end_color: form_field_background.gradient_end_color

Header Search Input Border

Controls the border width, style, and color for search box in the header.

  • Variable Name: header_search_input_border
  • Data Type: border

Default Values

  • units: form_field_border.units
  • width: form_field_border.width
  • style: form_field_border.style
  • color: form_field_border.color

Header Search Input Text Color

Controls the text color for the search box in the header.

  • Variable Name: header_search_input_text_color
  • Data Type: color

Default Values

  • color: form_field_text_color.color

Header Search Placeholder Text Color

Controls the text color for the placeholder text in the search box in the header

  • Variable Name: header_search_placeholder_text_color
  • Data Type: color

Default Values

  • color: placeholder_text_color.color

Header Subtabbar Background

Controls the background color and image for the sub navigation links under the tabs in the header area.

  • Variable Name: header_subtabbar_background
  • Data Type: background

Default Values

  • units: wrapper_background.units
  • color: wrapper_background.color
    • image: wrapper_background.image
  • repeat: wrapper_background.repeat
  • x: wrapper_background.x
  • y: wrapper_background.y
  • gradient_type: wrapper_background.gradient_type
  • gradient_direction: wrapper_background.gradient_direction
  • gradient_start_color: wrapper_background.gradient_start_color
    • gradient_mid_color: wrapper_background.gradient_mid_color
    • gradient_end_color: wrapper_background.gradient_end_color

Header Subtabbar Border

Controls the border width, style, and color for the sub navigation links under the tabs in the header area.

  • Variable Name: header_subtabbar_border
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-37, -35, -34

Header Subtabbar Font

Controls the font family, size, and style for the sub navigation links under the main navigation tabs in the header area.

  • Variable Name: header_subtabbar_font
  • Data Type: font

Default Values

  • units: rem
  • family: global_text_font.family
  • size: 1.2
  • lineheight: global_text_font.lineheight
  • weight: bold
  • style: global_text_font.style
  • variant: global_text_font.variant

Header Subtabbar Height

Controls the height of the sub navigation bar under the main navigation tabs in the header area.

  • Variable Name: header_subtabbar_height
  • Data Type: size

Default Values

  • units: rem
  • size: 2.9

Controls the margin size around the sub navigation links under the main navigation tabs in the header area.

  • Variable Name: header_subtabbar_link_margin
  • Data Type: margin

Default Values

  • units: px
  • left: 20

Header Subtabbar Text Color

Controls the text color for the links under the tabs in the header area.

  • Variable Name: header_subtabbar_text_color
  • Data Type: color

Default Values

  • color: global_palette_text_01.color
    • inherit_param_color: #252C2F|18, 8, 0

Header Subtabbar Text Color Hover

Controls the text color for the links under the tabs in the header area when the mouse is over them.

  • Variable Name: header_subtabbar_text_color_hover
  • Data Type: color

Default Values

  • color: global_palette_text_04.color

Header Subtabbar Text Decoration

Controls the text decoration for the sub navigation links under the main navigation tabs in the header area.

  • Variable Name: header_subtabbar_text_decoration
  • Data Type: textdecoration

Default Values

  • none: 1

Header Subtabbar Text Decoration Hover

Controls the text decoration for the sub navigation links under the main navigation tabs in the header area when the mouse is over them.

  • Variable Name: header_subtabbar_text_decoration_hover
  • Data Type: textdecoration

Default Values

  • none: 1

Header Subtabbar Text Transform

Controls text transformation for the sub navigation links under the tabs in the header area.

  • Variable Name: header_subtabbar_text_transform
  • Data Type: texttransform

Default Values

  • texttransform: none

Header Tab Background

Controls the background color and image for the navigation tabs in the header area.

  • Variable Name: header_tab_background
  • Data Type: background

Default Values

  • units: header_tabbar_background.units
  • color: header_tabbar_background.color
    • image: header_tabbar_background.image
  • repeat: header_tabbar_background.repeat
  • x: header_tabbar_background.x
  • y: header_tabbar_background.y
  • gradient_type: header_tabbar_background.gradient_type
  • gradient_direction: header_tabbar_background.gradient_direction
  • gradient_start_color: header_tabbar_background.gradient_start_color
    • gradient_mid_color: header_tabbar_background.gradient_mid_color
    • gradient_end_color: header_tabbar_background.gradient_end_color

Header Tab Background Active

Controls the background color and image for the navigation tabs in the header area, for the currently selected tab.

  • Variable Name: header_tab_background_active
  • Data Type: background

Default Values

  • color: global_palette_fill_01.color
    • gradient_type: linear-gradient
  • gradient_direction: to bottom
  • gradient_start_color: global_palette_fill_02.color
    • inherit_param_gradient_start_color: #F8F8F8|-1, -1, -1
  • gradient_end_color: global_palette_fill_01.color

Header Tab Background Hover

Controls the background color for the navigation tabs in the header area when the mouse is over them.

  • Variable Name: header_tab_background_hover
  • Data Type: background

Default Values

  • color: global_palette_accent_02.color
    • inherit_param_color: #0F93FF|-20, -26, -74

Header Tab Top Border Active

Controls the border width, style, and color for the top of the currently selected tab in the navigation tabs in the header.

  • Variable Name: header_tab_border_active
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-52, -49, -48

Header Tab Top Border Radius Size

Controls the size of the curved corners on the top corners of the main navigation tabs in the header area.

  • Variable Name: header_tab_border_radius_size
  • Data Type: size

Default Values

  • units: px
  • size: 1

Header Tab Bottom Border Active

Controls the border width, style, and color for the bottom side of the currently selected tab in the navigation tabs in the header.

  • Variable Name: header_tab_bottom_border_active
  • Data Type: border

Default Values

  • units: px

Header Tab Bottom Border Radius Size

Controls the size of the curved corners on the bottom corners of the main navigation tabs in the header area.

  • Variable Name: header_tab_bottom_border_radius_size
  • Data Type: size

Default Values

  • units: px

Header Tab Font

Controls the font family, size, and style for the main navigation tabs in the header area.

  • Variable Name: header_tab_font
  • Data Type: font

Default Values

  • units: rem
  • family: global_text_font.family
  • size: 1.4
  • lineheight: global_text_font.lineheight
  • weight: global_text_font.weight
  • style: global_text_font.style
  • variant: global_text_font.variant

Header Tab Font Active

Controls the font family, size, and style for the main navigation tabs in the header area in their active state.

  • Variable Name: header_tab_font_active
  • Data Type: font

Default Values

  • units: header_tab_font.units
  • family: header_tab_font.family
  • size: header_tab_font.size
  • lineheight: header_tab_font.lineheight
  • weight: bold
  • style: header_tab_font.style
  • variant: header_tab_font.variant

Header Tab Height

Controls the height of the main navigation tabs in the header area.

  • Variable Name: header_tab_height
  • Data Type: size

Default Values

  • units: rem
  • size: 3.5

Header Tab Line Height

Controls the line height of the main navigation tabs in the header area.

  • Variable Name: header_tab_line_height
  • Data Type: size

Default Values

  • units: rem
  • size: 3.6

Header Tab Margin

Controls the margin size around the main navigation tabs in the header area.

  • Variable Name: header_tab_margin
  • Data Type: margin

Default Values

  • units: px

Header Tab Padding

Controls the padding size around the text in the main navigation tabs in the header area.

  • Variable Name: header_tab_padding
  • Data Type: padding

Default Values

  • units: px
  • right: 17
  • left: 17

Header Tab Text Color

Controls the text color for the navigation tabs in the header area.

  • Variable Name: header_tab_text_color
  • Data Type: color

Default Values

  • color: global_palette_text_03.color

Header Tab Text Color Active

Controls the text color for a header navigation tab, when it is currently selected.

  • Variable Name: header_tab_text_color_active
  • Data Type: color

Default Values

  • color: global_palette_text_01.color
    • inherit_param_color: #252C2F|18, 8, 0

Header Tab Text Color Hover

Controls the text color for header navigation tabs when the mouse is over them.

  • Variable Name: header_tab_text_color_hover
  • Data Type: color

Default Values

  • color: global_palette_text_03.color

Header Tab Text Decoration

Controls the text decoration for the text in main navigation tabs in the header area.

  • Variable Name: header_tab_text_decoration
  • Data Type: textdecoration

Default Values

  • none: 1

Header Tab Text Decoration Active

Controls the text decoration for the text in main navigation tabs in the header area when the tab is selected or active.

  • Variable Name: header_tab_text_decoration_active
  • Data Type: textdecoration

Default Values

  • none: 1

Header Tab Text Decoration Hover

Controls the text decoration for the text in main navigation tabs in the header area when the mouse is over the tab.

  • Variable Name: header_tab_text_decoration_hover
  • Data Type: textdecoration

Default Values

  • none: 1

Header Tab Text Transform

Controls text transformation for the text in main navigation tabs in the header area.

  • Variable Name: header_tab_text_transform
  • Data Type: texttransform

Default Values

  • texttransform: none

Header Tabbar Background

Controls the background color and image for the navigation tabs area in the header.

  • Variable Name: header_tabbar_background
  • Data Type: background

Default Values

  • color: global_palette_accent_01.color
    • inherit_param_color: #052733|2, -10, -18
  • gradient_type: linear-gradient
  • gradient_direction: to bottom
  • gradient_start_color: global_palette_accent_01.color
    • inherit_param_gradient_start_color: #052733|4, -19, -33
  • gradient_end_color: global_palette_accent_01.color

Header Tabbar Bottom Border

Controls the border width, style, and color for the bottom of the header tabbar.

  • Variable Name: header_tabbar_border
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_fill_02.color
    • inherit_param_color: #F8F8F8|-52, -49, -48

Header Tabbar Divider Border

Controls the border for the divider between header navigation tabs.

  • Variable Name: header_tabbar_divider_border
  • Data Type: border

Default Values

  • units: px

Header Tabbar Height

Controls the height of the main navigation tab bar in the header area.

  • Variable Name: header_tabbar_height
  • Data Type: size

Default Values

  • units: rem
  • size: 3.5

Header Tabbar Top Border

Controls the border width, style, and color for the top of the header tabbar.

  • Variable Name: header_tabbar_top_border
  • Data Type: border

Default Values

  • units: px

Header Text Color

Controls the text color for any text in the header.

  • Variable Name: header_text_color
  • Data Type: color

Default Values

  • color: global_palette_text_02.color
    • inherit_param_color: #656A6D|-140, -135, -132

Notification Count Background

Controls the background color and image for the notification count in the top menu bar.

  • Variable Name: notification_count_background
  • Data Type: background

Default Values

  • color: global_palette_warning_01.color
    • inherit_param_color: #C81919|11, -6, -6
  • gradient_type: linear-gradient
  • gradient_direction: to bottom
  • gradient_start_color: global_palette_warning_01.color
    • inherit_param_gradient_start_color: #C81919|17, -20, -20
  • gradient_end_color: global_palette_warning_01.color
    • inherit_param_gradient_end_color: #C81919|-5, 8, 8

Notification Count Border

Controls the border color and style for the notification count in the top menu bar.

  • Variable Name: notification_count_border
  • Data Type: border

Default Values

  • units: px
  • width: 1
  • style: solid
  • color: global_palette_warning_01.color
    • inherit_param_color: #C81919|-50, -9, -9

Notification Count Text Color

Controls the text color for the notification count in the top menu bar.

  • Variable Name: notification_count_text_color
  • Data Type: color

Default Values

  • color: global_palette_text_03.color

Top Background Header/MainNav Background

Controls the background color and image for the header and the Main Navigation areas combined.

  • Variable Name: topbg_header_mainnav_background
  • Data Type: background

Default Values

  • color: transparent

Top Background Header/MainNav Bottom Border

Controls the border width, style, and color for the bottom side of the Header/MainNav element.

  • Variable Name: topbg_header_mainnav_bottom_border
  • Data Type: border

Default Values

  • units: px

Top Background Header/MainNav/SubNav Background

Controls the background color and image for the header, the Main Navigation, and the Secondary Navigation areas combined.

  • Variable Name: topbg_header_mainnav_subnav_background
  • Data Type: background

Default Values

  • color: transparent

Top Background Header/MainNav/SubNav Max Width

Controls the maximum width of the header, the Main Navigation, and the Secondary Navigation areas combined.

  • Variable Name: topbg_header_mainnav_subnav_max_width
  • Data Type: size

Default Values

  • units: %
  • size: 100
updated: 2021-09-13 09:08pm | Version: 5.6.5 Alpha 10