Website headers
A header is the navigation bar at the top of a page. It carries your logo, the menu links and usually one call to action, and it stays in place as visitors move through the site. Headers are built and stored on their own, separately from any page.
One header, many pages
You can keep as many headers as you need. A full menu suits your marketing pages, a shorter one suits landing pages and a third can carry the blog. Build a header once, attach it to a layout, and every page on that layout picks up the same navigation.
The headers list
Go to Website > Headers to see every header in the project. The table shows a Name column and a Header preview column, with a search field above it and Edit and Delete on each row.
The Headers screen
Every header in the project sits on one screen. Create Header in the top right starts a new one.
The header editor
The editor and its toolbar
A header opens in the same visual builder as a page, with the block palette on the left and the header itself on the canvas. The toolbar across the top holds the editing, preview and settings controls.
Test on all devices. Check the header on tablet and mobile in the device preview. The menu collapses to a hamburger at narrow width, and that button has to be big enough to tap.
Building your header
Headers are built from sections and columns, the same as a page. They lean on a smaller set of blocks made for navigation, and the main one is the Main Menu block, which holds the logo, the links and the call to action together.
Building a custom header. The Main Menu block is the quickest route, and it is not the only one. Combine a standalone Logo block with text and button blocks to lay out a header of your own design.
Connecting headers to pages
A header only reaches visitors once it is attached to pages. There are two ways to do that:
Through a layout
Assign the header to a website layout. A layout defines the shared structure for a group of pages, so every page on it inherits the header you picked. This is the route to take when you want the same navigation across a whole part of the site, because changing the layout changes every page at once.
Direct assignment on a page
You can also set a header on one page. Open the page settings, go to the Design tab and pick a header from the Header dropdown. Use it for a standalone landing page that needs its own navigation, or none.
Headers written by Mind
When you ask Mind to generate content, a header can come with it. Generated headers arrive as drafts with an info bar at the top of the editor saying so. Review the layout, change the links and accept or reject it, the same as any other draft.
Settings dialog
Best practices and troubleshooting
Common questions
Open the mobile preview and check three things. The hamburger menu opens and closes, the logo height is small enough to leave room for it, and the call to action button is large enough to tap.
An overlay header sits on top of the page content instead of above it, so the text color has to work against whatever the section underneath uses. Check it against every hero image the header appears over.