What Is the Header?
The header is the top section of your website, visible across all pages. It commonly includes:
Navigation menus
Call-to-action buttons
Optional elements like off-canvas menus
A well-structured header helps visitors quickly find important pages and actions.
How to Access Header Customization
To edit the header:
Log in to your WordPress Dashboard
Go to Appearance → Customize
When the customizer opens, click Header
You will now see the header editor with a live preview of your website.
Note: Available options depend on your active theme.
Understanding the Header Editor
The header editor is divided into two main tabs:
Elements
Controls what appears in the header and how elements are arranged.
Design
Controls how the header looks, including width and spacing.
Header Presets
At the top of the Header settings, you’ll find Header Presets.
What Header Presets Do
Apply predefined header layouts
Control how elements are distributed across rows and columns
Allow quick layout changes without manual rebuilding
You can choose a preset and then customize individual elements afterward.
Header Rows and Layout Structure
The header is built using rows and columns.
Each row can contain multiple columns
Each column can hold one or more elements
You can visually manage these rows directly in the preview
This structure allows layouts such as:
Menu centered with buttons on the right
Minimal headers with fewer elements
Balanced layouts across desktop and mobile
Header Elements
Under the Elements tab, you can add, remove, and manage header components.
Primary Menu
Controls the main navigation menu displayed in the header.
Choose which menu is shown
Update menu items and order via menu settings
Button
Adds a call-to-action button to the header.
Commonly used for actions like “Contact”, “Get Started”, or “Shop”
Can link to internal pages or external URLs
Off-Canvas Menu
Adds a hidden menu that slides into view when activated.
Often used for mobile navigation
Helps keep the header clean on smaller screens
Note: Logo and site title settings are handled in a separate article and are not covered here.
Header Types
Some themes support different header behaviors.
Transparent Header
A Transparent Header allows the header to sit on top of page content, such as hero images.
If a page uses a transparent header, you may see a notice indicating this, with an option to customize the transparent header separately.
Transparent headers are commonly used for:
Landing pages
Hero sections
Modern, visual-first designs
Header Design Settings
Switch to the Design tab to control the visual appearance of the header without changing its content.
Header Width
The Width setting controls how wide the header content appears.
You can choose between:
Full Width
The header stretches across the entire screen width.Content Width
The header content aligns with the main page content width.
Use Full Width for wide, modern layouts, or Content Width for a more structured and contained design.
Header Margin
The Margin setting controls the space around the header.
You can adjust margins for:
Top
Right
Bottom
Left
Margins help you:
Add space between the header and page content
Fine-tune vertical and horizontal spacing
Improve overall layout balance
You can link margins to apply the same value to all sides or unlink them to customize each side separately.
Saving Your Header Changes
When you’re done customizing the header:
Click Publish to apply the changes
Or use Save Draft to continue editing later
Helpful Tips
Preview your header on multiple pages
Test how the header looks on mobile and tablet views
Avoid overcrowding the header with too many elements
Use buttons only for key actions