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 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
