Canvas Docs

Header Container

The root of a built header: drop a Logo, Navigation, and other header parts inside. It is shown in the block inserter as Canvas Header Container and registered as canvas-core/header-container.

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

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

  • Layout ModeDefaultDefault (Space Between Row)

    Split arranges a Header Logo block between two Header Navigation blocks (nav / logo / nav) using a split-menu column layout. Centered centers the Logo and Navigation blocks in the row (full-border header layout): stack two Header Container blocks, both set to Centered, for a logo-above-menu row.

    ChoicesDefault (Space Between Row)Split (Centered LogoMenu Split Left/Right)Centered (Logo + Menu Centered)

  • Menu Trigger LabelDefaultEmpty

    The accessible name announced for the hamburger button. Empty uses the theme's own translated wording.

  • Menu Trigger ClassesDefaultEmpty

    Extra classes on the hamburger button, e.g. not-dark to keep it legible once the mobile header swaps colour scheme.

  • Menu Trigger Wrapper ClassesDefaultEmpty

    Extra classes on the .primary-menu-trigger element that wraps the hamburger button: the flex ordering utilities that place the trigger within the header row on small screens.

  • Row AlignmentDefaultSpace Between (Default)

    How the parts of the row are spread across it. Space Between pushes the first and last part to the two edges; None leaves the spacing to Extra Row Classes.

    ChoicesSpace Between (Default)StartCenterEndNone (no utility)Shown when Layout Mode is "Default (Space Between Row)"

  • Extra Row ClassesDefaultEmpty

    Additional utility classes appended to the .header-row (e.g. responsive flex utilities for reversing/reordering the row).

  • Trigger PositionDefaultAfter inner blocks (Default)

    Where the mobile menu trigger sits relative to the inner blocks. "After first" matches layouts that open with misc → trigger → nav. "After second" matches the common logo → misc → trigger → nav order: Logo is the 1st inner block, a Header Misc group (Search/Cart) is the 2nd, the trigger drops in right after it, before Navigation. "After third" matches layouts with three leading inner blocks before the trigger (e.g. logo → misc group → social/search group → trigger → nav).

    ChoicesAfter inner blocks (Default)Before inner blocksAfter first inner blockAfter second inner blockAfter third inner block

  • Mobile Menu TriggerDefaultOn

    Render the hamburger button that opens the mobile menu.

  • Search FormDefaultOff

    Append the .top-search-form the header search dropdown expands into.

  • Search Input ClassesDefaultEmpty

    Class names added to the search input itself, for a design that draws its own field.

    Shown when Search Form is on

  • Extended Search FormDefaultOff

    Add a category dropdown next to the search input (row layout).

    Shown when Search Form is on

  • Search AutocompleteDefaultOff

    Suggest matching posts while typing (public search-suggest endpoint + bundled typeahead engine).

    Shown when Search Form is on

  • Search PlaceholderDefaultEmpty

    Prompt shown inside the search field. Empty uses the default.

    Shown when Search Form is on

  • Show OnDefaultEmpty

    Restricts this entire row to a single device tier: use to stack a separate desktop row and mobile row inside the same header. Defaults to "Both" (no class added, byte-identical to before this field existed).

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

  • Trigger TargetDefaultEmpty

    Limits this hamburger to one navigation instead of opening every menu in the header. Needed when a header carries more than one button and menu pair, such as a separate desktop row and mobile row. Enter the selector that matches the menu it should open, or leave empty to open them all.

    Shown when Mobile Menu Trigger is on

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 Icon Link, Header Info, Header Logo.

Was this page helpful?