Header Root

The outermost element of a built header: carries variant classes and data-sticky-* attributes read by the theme's sticky-header script. Drop the #header-wrap group (and any other header content) inside. It is shown in the block inserter as Canvas Header Root and registered as canvas-core/header-root.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Header Root settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

  • Use Theme OptionsDefaultOff

    Derive the header's classes, sticky behaviour and size from the global Theme Options → Header settings (Header\Manager). When on, the manual fields below are ignored so one header follows your Theme Options everywhere. Turn off to set the classes explicitly on this block.

  • Header ClassesDefaultEmpty

    Header variant classes (e.g. full-header, transparent-header, dark, border-full-header, header-size-custom) applied directly to the element.

    Shown when Use Theme Options is off

  • Sticky ClassDefaultEmpty

    Classes the header swaps in once the visitor scrolls and it pins to the top, such as not-dark to keep a light header legible over the page.

    Shown when Use Theme Options is off

  • Responsive ClassDefaultEmpty

    Classes the header swaps in on the narrow screens where the menu collapses to a hamburger, for a colour scheme that only works there.

    Shown when Use Theme Options is off

  • Disable Sticky ShrinkDefaultOff

    Keeps the header at its full height once it pins, instead of shrinking as the visitor scrolls. Use it when a tall logo would be cropped by the shrink.

    Shown when Use Theme Options is off

  • Sticky OffsetDefaultEmpty

    How far down the page a visitor has to scroll before the header pins. Enter a number of pixels, or "full" to wait until the header has scrolled out of sight.

    Shown when Use Theme Options is off

  • Sticky Offset (Negative)DefaultEmpty

    Number of pixels to bring the pinning point earlier, so the header arrives before the visitor has scrolled the full offset above.

    Shown when Use Theme Options is off

  • Menu BreakpointDefaultEmpty

    The viewport width (in pixels) at which the expanded desktop menu engages below this value, the mobile menu trigger takes over. Leave empty to use the theme default.

    Shown when Use Theme Options is off

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Header: App Menu, Header Button, Header Cart, Header Container, Header Icon Link, Header Info.

Was this page helpful?