Canvas Docs

Header Logo

The site logo for a built header. Uses the Site Logo from Theme Options by default, or a chosen image override. It is shown in the block inserter as Canvas Header Logo and registered as canvas-core/header-logo.

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

The Header Logo 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:

Content

  • Logo OverrideDefault0

    Optional. Leave empty to use the Site Logo from Theme Options.

  • Text LogoDefaultEmpty

    Optional wordmark logo. When set, the #logo link renders this text instead of an image. Limited inline HTML is allowed (span/em/strong/b/i/br) so an accent glyph can be coloured.

  • Dark Logo OverrideDefault0

    Optional dark-scheme variant for the override logo (emitted as the standard logo-dark image).

  • Retina (2x) Logo OverrideDefault0

    Optional double-resolution variant emitted as a srcset 2x pair for the override logo.

  • Retina (2x) Dark Logo OverrideDefault0

    Optional double-resolution variant of the dark override logo.

  • Sticky Logo OverrideDefault0

    Optional variant shown once the header sticks to the top of the viewport (emitted as the standard logo-sticky image).

  • Retina (2x) Sticky Logo OverrideDefault0

    Optional double-resolution variant of the sticky override logo.

  • Mobile Logo OverrideDefault0

    Optional variant shown below the mobile-menu breakpoint (emitted as the standard logo-mobile image). A side header whose desktop mark is tall or stacked needs a wide one on phones.

  • Retina (2x) Mobile Logo OverrideDefault0

    Optional double-resolution variant of the mobile override logo.

Settings

  • Emit Dark Logo VariantDefaultOn

    The dark-scheme logo image is emitted alongside the default one, falling back to the default image when no dark override is set. Turn this off for a header that never inverts, so only the variants you set are output.

  • Max Height (px)Default0

    Optional. Constrain the logo height: applied to every emitted logo variant (default / dark / sticky / mobile). 0 = theme default.

  • Logo Wrapper ClassesDefaultEmpty

    Optional utility classes added to the #logo wrapper (e.g. responsive alignment utilities).

  • Logo Image ClassesDefaultEmpty

    Optional utility classes added to each logo image itself: e.g. ms-0 to cancel the theme’s automatic centring.

  • Logo Image Inline StyleDefaultEmpty

    One-off styling applied to each logo image, for a case no class covers, such as a brand mark that turns on its own.

  • Logo Link ClassesDefaultEmpty

    Optional utility classes added to the logo link itself, for a text wordmark’s typeface and letter-spacing.

  • Logo Link Inline StyleDefaultEmpty

    One-off styling for the logo link itself, for a case no class covers, such as forcing the logo to sit at a fixed row height.

  • Smooth-Scroll TargetDefaultEmpty

    Selector the logo link scrolls to on a one-page layout, e.g. #slider. Empty leaves the logo linking to the home page.

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?