Canvas Docs

Header Options Per Page

One header serves the whole site, but pages differ: the front page wants transparency over a hero, a landing page wants no header at all, a photography page wants the dark scheme. The Header Settings panel on every page's edit screen exists for exactly this. Every control in it starts on Global Default (or Use header setting for the menu controls), which means the page follows the site, so the panel costs nothing until you change something, and everything you change is scoped to that page alone.

Starting screenthe block editor, on the page you are adjusting, with the Header Settings panel open among the page's settings.

Choosing The Header And Layout

The top of the panel decides which header renders and in what layout family:

  • Built Header Swaps in a different header built in the Header Builder for this page. Default: Inherit (use global default).
  • Header Layout The layout family for this page, grouped as Standard (Default Light, Dark, Plain (no full-width header), Full Bordered, Split Menu), Transparent (Transparent, Semi-Transparent), Floating (Floating, Floating Semi-Transparent, Floating Small), Side (Side Left and Side Right, each plain, Open, or Open + Push) and Special (Sticky on Scroll-up, Offcanvas, Offcanvas Light, Offcanvas Overlay). Choose None (Disable Header) for a page with no header at all. Default: Global Default.
  • Header Style The style tier above the layout: Full Bordered gives the header its full width bottom rule, Plain drops it. Default: Global Default.
  • Force transparent header on this page Makes the header sit over the page content regardless of the layout chosen, for a page whose opening section supplies the backdrop. Default: Off.
  • Top Bar and Top Bar Color Scheme Which top bar renders above the header here, and in which scheme. Covered in Top Bars.

A transparent header needs something to sit over, so Canvas checks the page before it renders one. An assigned hero, an assigned slider, a page title band set to overlap the header, or a template or page layout that puts the content itself under the bar all count as that backdrop, and a page carrying one of them keeps the transparent layout you chose here. When the page carries none of them, the header renders in its solid scheme instead, in the same form it takes once it pins, because a transparent bar over a plain page paints its logo and menu straight onto the page background.

Appearance

The Appearance group tunes the bar itself:

  • Color Scheme Dark adds the theme's dark class to the header on this page only. Default: Global Default. Choices: Light, Dark.
  • Header Size The header height tier. Default (no size class) removes the site wide size class; Custom uses the custom height. Default: Global Default. Choices: Default (no size class), Small, Medium, Large, Custom.
  • Custom Header Height Any CSS length for the bar height, used with the Custom size.
  • Responsive State Classes and Extra Header Classes Utility classes swapped onto the header below the mobile breakpoint, and added to it always, space separated. These exist so a design tweak stays in the class system instead of custom CSS.
  • Header Classes (exact list) The complete class list for this page's header, written exactly as given. It replaces everything the settings above compose, including their order, so it is the escape hatch for a design that needs precise class order, and it should stay empty otherwise.

Alongside these sit fine grained boxes for one page designs: Floating Header Background and Floating Header Top Offset for the floating layouts, Menu Font Size and Header Icon Size for the bar's typography and icons, Dropdown Corner Radius and Dropdown Top Border for the panels the menu opens, and Menu Breakpoint (px) for where the desktop menu gives way to the mobile trigger. Each accepts a CSS value and inherits the theme default while empty.

One header record can drive a family of pages that differ only in menu treatment, because the Menu group overrides the navigation's own settings per page:

  • Menu Style The top level item style. Choices: Default, Style 3 (Boxed Items), Style 4 (Bordered Items), Style 5 (Stacked Icon + Label), Style 6 (Animated Underline).
  • Menu Item Spacing How space between top level items is created. Choices: Default, Margin.
  • Dropdown Skin The treatment of every dropdown and mega menu panel. Choices: Default, Blur, Colors, Dark, Flat, Full-Width, Rounded, Shadow.
  • Dropdown Arrow Icon The caret beside items that have a sub-menu. Choices: Default (Theme Caret), Chevron, Short Arrow, Filled Caret.
  • Item Sub-Titles Shows each top level item's Description (from Appearance > Menus) beneath its label.
  • Open Dropdowns on Click Opens sub-menus on click instead of hover, which suits touch first audiences.

Every one of these offers both Use header setting and Default, and they are not the same thing: Use header setting inherits whatever the header record chose, while Default explicitly turns the treatment off for this page even when the header has one.

  • Bordered Menu Distribution With the Full Bordered style, whether top level items keep their natural widths or stretch to an equal share with a divider each. Choices: Use header setting, Natural widths, Justified (equal share).

Sticky

The Sticky group pins the header while this page scrolls:

  • Sticky Header Keep the header visible while scrolling. Global Default follows Theme Options, so use Enabled or Disabled only to differ from the site.
  • Sticky Behavior Static Sticky pins the bar permanently; Show on Scroll Up hides it while reading and returns it the moment the visitor scrolls back.
  • Sticky Shrink Disable to keep the pinned header at full height instead of shrinking on scroll.
  • Sticky on Mobile Keeps the header pinned below the mobile menu breakpoint too.
  • Sticky Offset and Sticky Offset - Reduce By How far the page scrolls before the header pins: a pixel value, or "full" for one whole viewport, in which case the reduce box engages it that many pixels before the fold ("auto" uses the header's own height).
  • Sticky State Classes and Sticky Header Height Classes swapped onto the header while pinned, and the height the bar takes once pinned, as a CSS length.

Pitfalls

The interactions in this panel are deliberate, and worth knowing before they look like bugs:

  • The sticky sub-settings vanished. They hide only when Sticky Header is explicitly Disabled. On Global Default they stay visible, because the site wide option may well have sticky on and the sub-settings must remain reachable.
  • Sticky Offset - Reduce By does nothing. It applies only while Sticky Offset is "full"; with a pixel offset there is no fold to reduce from.
  • Bordered Menu Distribution has no effect. It is a Full Bordered feature. With any other header style there are no bordered items to distribute.
  • A menu control set to Default did not inherit. It was not meant to: Default means "explicitly none". Choose Use header setting to inherit.
  • A transparent layout renders solid on one page. That page has no hero, no assigned slider, no title band overlapping the header and no template putting its content under the bar, so Canvas paints the header rather than leaving it invisible over the page background. Give the page one of those backdrops and the transparency returns. The check runs on the front end only, so the editor preview still shows the transparent bar.
  • The Site Editor shows the theme's header, not the one this page uses. A built header is assigned to the page and swapped in as the page is served, so the canvas draws the header template part in its place, with its own structure and styling. Open the header record to edit it, and check this page on the front end.
  • Nothing you set in Appearance seems to apply. Check Header Classes (exact list): while it holds a value, it replaces the composed classes wholesale, including the ones the other settings would have added.
  • Menu Item Horizontal Padding changes nothing on the page. The spacing between top level items is set site wide by Menu Item Padding, on the Menu sub-tab of Canvas > Theme Options > Header. One length there changes the left and right sides only; two lengths set the vertical padding as well, which also fixes the height of the bar.

The site wide versions of these decisions live on the Header options tab. For the bar above the header, continue to Top Bars.

Was this page helpful?