Header

Section overview

The theme header section renders the site header for navigation and key actions. It supports background media, flexible row or column layouts, and separate default and overlay style states for color and border behavior.

Common use cases

• Building global header navigation and utility actions.

• Configuring different visual states for default and overlap scenarios.

• Arranging header content in row or column-based layouts.

• Managing responsive visibility and spacing for header content.

Usage tips

• Keep logo and navigation hierarchy clear before adding additional header blocks.

• Verify default and overlay color combinations against banner-heavy pages.

• Test row and column alignment choices on mobile and desktop breakpoints.

• Use block wrap carefully to avoid crowding in narrow viewports.

Section settings

Setting	Description
Enable background image or video	Turns on background media rendering for the header.
Image background desktop	Background image used on desktop.
Image background mobile	Optional background image override for mobile.
Video background	Optional background video source.
Show video on mobile	Enables background video playback on mobile devices.
Show entire image	Displays full image rather than cropping to fill.
Top spacing	Adds top padding to the header container.
Bottom spacing	Adds bottom padding to the header container.
Enable x padding	Adds horizontal inner padding.
Gap size	Controls spacing between child layout elements.
Default color scheme	Header color scheme used in the default state.
Overlay color scheme	Header color scheme used when overlap mode is active.
Default color border	Border color used in the default state.
Overlay color border	Border color used when overlap mode is active.
Border position	Controls where borders appear.
Direction	Sets row or column layout for header children.
Row x alignment	Horizontal alignment used in row layout.
Row y alignment	Vertical alignment used in row layout.
Column x alignment	Horizontal/content alignment used in column layout.
Column y alignment	Vertical alignment used in column layout.
Enable block wrap	Allows child blocks to wrap to additional lines.
Enable margin	Applies global horizontal margin settings.
Visibility	Controls device visibility (all, mobile, or desktop).

Block settings

This section supports:

• _g__flex-item blocks for header layout composition.