The header

Header and footer

The strip at the top of every page. It has two jobs: move the reader onward, and show what you are promoting right now.

Say the important thing first: it is not one thing, it is a zone made of several independent elements. That is why there are so many settings, and why you should look for them by element rather than by the word "header."

#What the header is built from

The header source is chosen the same way as the other large zones of the site: off, native, an Elementor template, or a block pattern. See Content zones and insertions.

The native option is what you see out of the box, and it stays the main one. Everything else in this section describes it.

An Elementor template or a pattern replaces the header completely. That is the choice when you need a composition the native header does not offer, and the cost is obvious: the native header settings no longer apply.

#Two layers of settings

The thing to get right: Pro does not replace the free header, it builds on top of it.

The base stays in the Customizer, and that is where position, height, background, blur, border, corner radius, padding, width, the logo, and the action button live.

Pro adds what the base does not have: the header source, advanced search, the posts ticker, the marketing bar, the language switcher, and per-item menu settings.

The time-saving consequence: if you cannot find an appearance setting in Theme Options, it is almost certainly in the Customizer, and the other way around.

#Behavior on scroll

The sticky header is one group of settings in the Customizer: position, hiding on scroll down with a return on scroll up, the reveal animation, and the offset from the top.

The choice is really between two behaviors. A header that is always on screen keeps navigation within reach and takes height from every page. A header that hides on the way down gives the whole screen to the text and comes back on the first movement upward. The second is the compromise most sites want.

#What can go in it

The logo, the menu, search, the action button, the light and dark scheme switcher, the marketing bar, a category row, and the posts ticker. Each has its own page in this section.

The scheme switcher and the action button are enabled separately for wide and narrow screens. That is deliberate: a narrow header has little room, and every extra element pushes out a more important one.

When there are more menu items than fit, the extras collapse under a single item. You can set the limit for that yourself.

#Narrow screens

Mobile navigation is not a shrunken desktop header. It is its own layer of settings in the Customizer, where you separately enable the mobile menu, the social icons and copyright in the slide-out panel, search, the action button, the scheme switcher, and its own typography.

Check the header at both widths. An element you switched off on desktop can still be on for mobile, and it is easy to ship a phone header you have never looked at.
I switched the header source to a pattern and my settings stopped working

Expected. Native header settings apply to the native header. A pattern is yours to build and to maintain.

Why is my menu not in the header?

The menu exists but is not assigned to the navigation location. See Menu customization.

Last updated

Was this article helpful?

FIND THE ONE THAT FITS YOUR PROJECT

Import a demo, swap the content, adjust the layout. Modern WordPress under the hood, fast even when the site fills up.