Skip to content

Header

Everything about how the header behaves and what color it is, for the whole site. Find it in Theme settings › Website header.

Per-page overrides live in the Header and footer settings module, which can give one page a different scheme, position or header entirely.

At a glance

Setting Options Default
Default header type Simple Menu / Megamenu simple_navigation
Website header = landing page header? on / off on
Which header do you want on landing page? Simple Menu / Megamenu simple_navigation
Mobile menu breakpoint 768 to 1600 px 1023
Add search functionality on / off off
Header position Normal / Overlap normal
Sticky behavior None / Sticky / Hide on scroll down sticky
Shadow on scroll None / Light / Regular / Dark regular
Header color scheme Light / Dark (for dark backgrounds) light
Color scheme on scroll Same as header / Light / Dark / Custom same
Menu color scheme [mobile] Same as header / Use Light scheme colors / Use Dark scheme colors same

Header position

Normal puts the header above the page and pushes the content down. Overlap lifts the page up underneath it, so a hero image runs to the top of the window and the header floats over it with a transparent background.

Overlap is what you want for a full bleed hero. It is also what makes the next setting matter.

What happens on scroll

Three settings work together here, and it helps to read them in order.

Sticky behavior decides whether the header follows you. Sticky keeps it pinned at the top; Hide on scroll down pins it but slides it away while you scroll down and brings it back when you scroll up; None lets it scroll away with the page.

Shadow on scroll adds a shadow once the page moves, which separates the bar from the content sliding under it.

Color scheme on scroll decides what the header looks like once the page has moved. This is the one that matters for an overlap header.

Color scheme on scroll

The common case is a transparent header over a hero

Set Header position to Overlap and Header color scheme to Dark, so white nav links sit over your hero image. Then set Color scheme on scroll to Light. As soon as the visitor scrolls, the header becomes a solid light bar with dark links.

Option What it does
Same as header Nothing changes color. Only the shadow and the position respond to scroll.
Light The whole header switches to your Light scheme once scrolled.
Dark The whole header switches to your Dark scheme once scrolled.
Custom Reveals seven colors you set yourself, for a scrolled bar that matches neither scheme.

Light and Dark change the whole header, not just the bar: the dropdowns, the megamenu, the language switcher and the mobile drawer all move with it. That is the reason to prefer them. They also need no colors of their own, because they reuse the two schemes you have already set up.

The button and logo change with it

Your header button already has two styles: Style (light header) and Style (dark header), set on the Simple Navigation or Megamenu module. When the header swaps scheme on scroll, the button moves between them automatically.

So a white outline button over a dark hero becomes your Primary button on the light bar, with nothing extra to set. Pick the two styles once and the scroll state handles the rest.

The logo works the same way. You upload a light-scheme and a dark-scheme logo on the nav module, and Logo on scroll is set to Same as current (follows the header) by default, so the logo swaps with the bar. A white logo over a dark hero becomes your dark logo on the light bar.

If you want the logo to do something else, that same field takes an explicit Use light scheme logo, Use dark scheme logo, or an uploaded image, and any of those wins over the automatic behaviour.

Custom is the exception, for the button

A custom bar is a color you invented, so there is no second style for the button to fall back to. That is why Scrolled header colors carries its own Button style field and the Light and Dark options do not. The logo needs no equivalent: a custom bar still picks one of your two logos through Logo on scroll.

When to use Custom instead

Custom exists for a scrolled bar that is neither of your schemes, a brand color bar for example. It reveals Scrolled header colors directly underneath, with a Light half, a Dark half, and a Button style for the scrolled state.

Custom only recolors the bar

The dropdowns, megamenu and mobile drawer keep the header's own scheme. So a strongly contrasting bar can look disconnected from a menu opened beneath it. If one of your two schemes will do the job, Light or Dark is the better answer.

Only the half matching your header is used

Scrolled header colors lists a Light scheme and a Dark scheme half, but a page only ever uses the one matching Header color scheme. If your header is Dark, editing the Light values will look like nothing is happening. Set the half that matches, and set the other half too if you might switch later.

Header color scheme

Which of your two color schemes the header uses. The scheme supplies every header color: the bar, the links, the dropdowns, the megamenu panel, the language switcher and the mobile drawer. Set those under Light color scheme › Navigation and Dark color scheme › Navigation.

A single page can override this from the Header and footer settings module, including a fully custom set of colors.

Mobile

Mobile menu breakpoint is the width below which the nav collapses to a burger. Default 1023px, so tablets get the mobile menu.

Menu color scheme [mobile] lets the slide out menu use a different scheme from the bar, which is useful when a transparent header needs light links but the drawer behind it should be dark.

Tips & gotchas

Overlap plus Color scheme on scroll is the pattern worth knowing

Transparent over the hero, solid once scrolled. It is two settings and it is what most modern headers do.

Three things move together

Colors, the button and the logo all follow the scheme swap, using pairs you have already set. If one of them looks wrong, check whether it has been pinned to a specific value: Logo on scroll set to something other than Same, or a Style (on scroll) on a per-page custom header, both override the automatic behaviour.

Sticky behavior must be on

Color scheme on scroll only appears when Sticky behavior is set to something other than None. With no sticky header there is no scrolled state to color.