Canvas Docs

Header Zone

A positioning slot inside a Header Container row: drop a Logo, Navigation, or a small cluster of header parts inside, then use the alignment/order/visibility fields to place it. It is shown in the block inserter as Canvas Header Zone and registered as canvas-core/header-zone.

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

The Header Zone 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

  • Zone WrapperDefaultAuto (merge onto single child, wrap otherwise)

    Auto merges the zone's classes directly onto a single nested block's own root element (no extra markup); with two or more nested blocks it falls back to the same flex wrapper "div" always uses. "Header Misc Cluster" renders the .header-misc class the Search/Cart/Icon-Link groups already use. "Plain Wrapper" forces a div carrying ONLY the zone's own classes, for a design whose wrapper is not a flex row.

    ChoicesAuto (merge onto single childwrap otherwise)Header Misc Cluster (.header-misc)Flex Wrapper (force a div)Plain Wrapper (force a divno flex classes)

  • PositionDefaultEmpty

    Margin-auto utility controlling how this zone shares the row's remaining space with its siblings.

    ChoicesNone (empty)Push Right (ms-auto)Push Right - Desktop Only (ms-lg-auto)Push Left (me-auto)Push Left - Desktop Only (me-lg-auto)Center (mx-auto)Center - Desktop Only (mx-lg-auto)

  • Order (Desktop)DefaultEmpty

    Where this zone sits in the row on wide screens, without changing the order it appears in on phones and tablets.

    ChoicesDefault (empty)First12345Last

  • Order (Mobile)DefaultEmpty

    Reorders this zone within the row at every breakpoint (no responsive prefix), so it also applies below the desktop breakpoint.

    ChoicesDefault (empty)First12345Last

  • Show OnDefaultEmpty

    Restricts this zone to a single device tier: use to build separate desktop/mobile rows in the same header.

    ChoicesBoth (Desktop & Mobile) (empty)Desktop Only (d-none d-lg-flex)Mobile Only (d-lg-none)

  • Extra ClassesDefaultEmpty

    Additional utility classes appended to the zone (space-separated).

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?