Header Builder arranges the content of a site header, with built-in sticky and overlay controls. The element defines the header layout; the header template's targeting determines where it appears.
Add and configure Header Builder
Click Add, choose Header Builder, and place it in the container.
Open the appropriate header template and add the header content inside Header Builder.
Configure Design > Layout, Size, and Spacing for the logo, navigation, and other content.
Style Background and Borders, then configure Sticky, Overlay, and Advanced only as needed.
Save your changes.
Header Builder controls in the Breakdance editor
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Design > Background
Setting
Purpose and options
Behavior
Color
Color or supported fill.
Responsive
Design > Borders
Setting
Purpose and options
Behavior
Top > Width
Width.
Responsive
Top > Fill
Color or supported fill.
Responsive
Bottom > Width
Width.
Responsive
Bottom > Fill
Color or supported fill.
Responsive
Shadow
Shadow offset, blur, spread, color.
Responsive
Design > Layout
Setting
Purpose and options
Behavior
Stack Vertically At
Breakpoint.
Shared
Gap
Space between items.
Responsive
Design > Size
Setting
Purpose and options
Behavior
Width
Contained, Full, Custom.
Responsive
Custom Width
Custom width and unit. When:Width = Custom.
Responsive
Min Height
Min height and unit.
Responsive
Design > Spacing
Setting
Purpose and options
Behavior
Padding
Padding.
Responsive
Design > Sticky
Setting
Purpose and options
Behavior
Enable
On/off.
Shared
Position
Top, Bottom. When:Enable is set.
Shared
Page Top Margin
Page top margin and unit. When:Position is unset and Enable is set or Position = Top and Enable is set.
Responsive
Page Bottom Margin
Page bottom margin and unit. When:Position = Bottom and Enable is set.
Responsive
Shown when Enable is set.
Setting
Purpose and options
Behavior
Offset
Offset and unit.
Responsive
Scroll Behavior > Hide After
Hide after and unit.
Shared
Scroll Behavior > Hide Until Scroll
On/off.
Shared
Setting
Purpose and options
Behavior
Scroll Behavior > Scroll Distance
Scroll distance and unit. When:Enable is set and Hide Until Scroll is set.
Shared
Scroll Behavior > Reveal Animation
Fade, Slide. When:Enable is set.
Shared
Scroll Behavior > Duration
Duration and unit. When:Enable is set and Reveal Animation is set.
Shared
Scroll Behavior > Reveal On Scroll Up
On/off. When:Enable is set.
Shared
Scroll Behavior > Offset After Scroll
Offset after scroll and unit. When:Enable is set and Enable is set.
Responsive
Shown when Enable is set.
Setting
Purpose and options
Behavior
Style > Background
Color or supported fill.
Responsive
Style > Min Height
Min height and unit.
Responsive
Style > Borders > Top > Width
Width.
Responsive
Style > Borders > Top > Fill
Color or supported fill.
Responsive
Style > Borders > Bottom > Width
Width.
Responsive
Style > Borders > Bottom > Fill
Color or supported fill.
Responsive
Style > Borders > Shadow
Shadow offset, blur, spread, color.
Responsive
Disable At
Breakpoint.
Shared
Z-Index
Set the numeric z-index value.
Shared
Design > Overlay
Setting
Purpose and options
Behavior
Enable
On/off.
Shared
Keep Style
On/off. When:Enable is set.
Shared
Z-Index
Set the numeric z-index value. When:Enable is set.
Shared
Design > Advanced
Setting
Purpose and options
Behavior
Disable Builder Preview Mode
On/off.
Shared
Troubleshooting
The header does not appear on a page
Check the header template's targeting and priority. Header Builder's layout controls do not assign the template to pages.
An overlay header covers the opening content
Review Overlay settings and the first section's spacing. Test both the initial and scrolled header states.
