How To Build A Header
The header is the one piece of design every visitor meets, and in Canvas you build it once, from blocks, as a Header record. The Header Builder is that record's home: each header you create there is a complete arrangement of logo, navigation and actions that you then assign site wide, or hand to individual pages that need a different one. Because the header is a record rather than something painted onto each page, changing it later is one edit.
How A Header Is Put Together
A built header is a stack of rows, and each row is a set of zones:
- The Canvas Header Container block is a row. Most headers are one container; stack a second for a two row or device specific header.
- The Canvas Header Zone block is a slot inside the row. Zones carry the alignment and ordering, so moving something across the header means moving or configuring its zone, not fighting margins.
- Inside the zones go the pieces from the Canvas Header block category: Canvas Header Logo, Canvas Header Navigation, search, cart, buttons, icon links and the rest.
The Canvas Header Container reference and Canvas Header Zone reference document every setting the two structure blocks expose, including the mobile menu trigger and per device rows.
How To Create A Header
Starting screenthe WordPress admin, CanvasHeader Builder.
Choose Add New and give the header a name you will recognise in a select box later, because that name is how you will assign it. Insert a Canvas Header Container, and while it is empty it offers a choice of ready made layouts: Logo + Menu (the standard row, and the default), Logo + Menu Left + Actions, Menu Right, Split Menu and Centered Logo. Pick the one closest to your design, because starting from a working arrangement and adjusting zones is faster than composing from nothing.
The editor canvas previews the header with the site's real styling, so what you arrange is what the front end will render. Fill the zones, adjust the navigation block's settings to pick your menu, and publish.
How To Assign It
A published header renders nowhere until it is assigned. There are two levels:
- Site wide. Go to Canvas > Theme Options, open the Header tab, and set Default Header (Builder) to your header. Every page without an override now uses it.
- Per page. On any page's edit screen, the Header Settings panel has a Built Header select. Leave it on Inherit (use global default) normally; set it to another header for a landing page or a section that needs its own chrome.
The Header tab also holds everything the header record itself deliberately does not: sticky behaviour, transparency, colour scheme, sizes. See the Header options reference for the full tab, and Header Options Per Page for the per page versions of the same decisions.
Pitfalls
These misunderstandings account for most header builder support:
- You published a header and the site did not change. Publishing creates the record; assignment makes it render. Set Default Header (Builder) in Theme Options, or the page level Built Header, and it appears.
- You are looking for sticky and transparency settings on the header record. They are not there, on purpose. A built header is the arrangement only; behaviour and appearance come from Canvas > Theme Options > Header and from each page's Header Settings panel, so one arrangement can be transparent on the front page and solid elsewhere.
- The navigation reads "Assign a menu in the block settings". That row is a prompt for you, drawn only in the editor's preview of the block, and no visitor ever sees it. What the front end renders in its place is an empty menu, so pick a menu in the block's settings, or assign one to the Primary Menu location, before you judge the header on the site.
- The Site Editor canvas shows a header you did not build. The header template part draws with its real structure and styling there, but the header you assigned is swapped in as the page is served, so the canvas shows the theme's part rather than your record. Edit your header on its own screen, where the canvas previews it with the site's real styling, and confirm the result on the front end.
- Your second navigation or second row misbehaves on mobile. With more than one navigation in a header, each mobile trigger needs to be told which navigation it opens; a trigger with no target toggles them all. The Canvas Header Container reference covers the trigger settings.
What To Read Next
Continue with Header Options Per Page for the per page overrides, Top Bars for the strip above the header, and How To Build A Mega Menu for the dropdown panels the navigation opens.