Header

The header is the navigation bar that sits at the top (or side) of every page: your logo, the main menu built from your pages, and utilities like search, account, and cart. It comes in three styles — Standard Header, Minimal Header, and Vertical Header.

The menu items come from your pages — you don't type them into the header. Reorder and nest them in the site tree; each header style then decides how they're displayed. Every style is organised into four tabs: Layout, Behaviour, Appearance, and Padding.

Choosing a style

Navigation source

These options set how your pages turn into menu items, and appear on every style under Behaviour → Navigation.

• Hide Home — drop the automatic Home entry from the menu.
• Hide Submenus — show only top-level entries, hiding nested sub-pages. On the Minimal and Vertical styles this applies only to the Stacked and Mega Menu item layouts; it isn't shown for the Row layout.
• Menu Root Page — start the menu from a page other than Home, so its child pages become the top level. Leave it empty to start from Home.

Standard Header

A horizontal bar with the logo and full menu shown inline.

Layout (top of the block) chooses the arrangement: Logo Left (default), Logo Center, or Nav Right. Menu Type sets how sub-pages open: Dropdown (default) for simple panels, or Mega Menu for a wide multi-column panel.

On the Layout tab:

• Height — Small, Medium (default), or Large.
• Width — Full, Page (default), or Narrow.
• Logo — turn on Logo as Text to use your site title as text instead of an image (see the logo block), or set the logo Width as a percentage (default 25%).
• Menu Trigger — open panels on Hover (default) or Click.
• Animation — None, Fade (default), or Slide.
• Mega Menu Alignment — Left (default) or Center, shown when Menu Type is Mega Menu.
• Buttons — turn on Show Buttons to add call-to-action buttons to the bar, then add each one.
• Quick Links — extra labelled links with icons, shown in the actions area alongside cart and account.
• Social Links — your social platform links in the actions area.
• Mobile Drawer — the menu panel shown on small screens: its position (Left, Right, Top), width, how items are laid out, alignment, Content Position (Top, Center, Bottom, or Space Between), Stacked Indent, and a Show Search in Drawer toggle. A Top position adds a Drawer Height (Small, Medium, Large, Full) and Content Width (Full, Page, Narrow); Mega Menu layouts add a Mega Menu Width (Full, Page, Narrow).

On the Behaviour tab:

• Utilities — Search (with Search Style: In Menu or Go to Page; when In Menu is chosen, a Search Display of Expandable or Expanded appears), Account Link, and Cart. Account and cart only do something when those features are in use on your site.
• Scroll — Header Mode (Static, or Overlay to float over the page), Sticky (None, On Scroll Up, Always, or Always (Reduce Logo)), and — in Overlay mode — an Overlay Background option with gradient or solid-on-scroll colours.
• Mobile Drawer — the open Animation (None, Slide, or Fade).

Minimal Header

A compact bar that pushes most navigation into a drawer.

Layout (top of the block) chooses where the logo and menu button sit: Logo Center (default), Logo Left, Logo Left, Actions First, or Hamburger First. Menu Item Layout sets how items appear once the drawer opens: Row, Stacked (default), or Mega Menu.

It carries the same Layout-tab building blocks as the Standard header (height, width, logo, buttons, quick links, social links, drawer), plus a Quick Links Placement and Social Links Placement option — show each in the bar (Navbar) or only inside the drawer (In Drawer, the default).

On the Behaviour tab, Account Link and Cart each gain their own Placement (Navbar or In Drawer), and Search, scroll, and drawer animation work as on the Standard header.

Vertical Header

A sidebar header running down the side of the page.

Layout (top of the block) chooses the sidebar arrangement: Menu Top, Logo Top (default), Logo Top + Utilities, or Menu Top + Utilities. Menu Item Layout is Row, Stacked (default), or Mega Menu.

On the Layout tab, Sidebar Width replaces Height/Width (Small, Medium, Large). The logo (its width defaults to 60% here, since the sidebar is narrow), buttons (shown inside the drawer here), quick links, and social links work as elsewhere. On the + Utilities layouts, each quick link gains a Placement of Top, Bottom, or In Drawer, letting you pin it to the top or bottom of the sidebar.

On the Behaviour tab, Header Mode is Static (takes up space in the layout) or Overlay (sits on top of page content). On the + Utilities layouts, Social Links Placement (under Navigation) and the placement of search, account, and cart (under Utilities) each offer the same Top, Bottom, or In Drawer choice. The drawer always slides in from the left.

Shared controls

The header reuses the same controls as the rest of the editor — see the dedicated pages instead of re-learning them here:

• Buttons and links — the call-to-action buttons, quick links, and social links you add to the bar or drawer, including picking an icon for each.
• Colour scheme in blocks — the Color Scheme, Background Color, and Text Color on the Appearance tab. On the Standard header the dropdown and mega-menu panels can each inherit the header's scheme or set their own; on every style the drawer can do the same.
• Background and overlay — the overlay-on-scroll backgrounds in Overlay mode.
• Spacing and padding — the Margin and Padding tab (the Vertical header has Padding only).

Navigation link sizing, font, transform, and hover live in the Navigation Links group (called Drawer Menu Items on the Minimal and Vertical styles) on the Appearance tab. A Utility Appearance group sets how account, cart, and search show — each as Icon, Text, or Icon + Text — and a Quick Links Appearance offers the same three; the Standard and Minimal styles add a Social Links Appearance option (Icon or Text). On the Standard header, the Utility Appearance and drawer groups can each inherit the navigation links' styling rather than set their own.

The Appearance tab also has a Border option: add a border on the bar — Bottom or All on the Standard and Minimal styles, Edge or All on the Vertical style — with a Border Style of Theme or Custom (Custom adds a Border Width, 1–10px, and Border Color). The drawer has its own Background Style (None, Solid, Blur), Backdrop (None, Overlay, or Blur, with a Backdrop Color for Overlay), and matching Border options.

Example

A performing-arts site wants a prominent, browsable menu. Add the Standard Header, set Layout to Logo Left and Menu Type to Mega Menu, then on Behaviour turn on Search and set Sticky to On Scroll Up so the bar reappears as visitors scroll back up. On the Layout tab, turn on Show Buttons and add a "Book Now" button linking to the box office.

Where to go next