The header is the first thing visitors see on your website. It holds your logo, navigation menu and usually a call-to-action button, so a clean, fast header builds trust straight away. This guide shows three reliable ways to make a header in WordPress, whichever theme or page builder you use.
1. Decide what your header needs
Before you build anything, list the elements you want: logo, main menu, a contact or quote button, and optionally a phone number or search icon. Fewer items usually work better, especially on mobile.
2. Method A: Edit the header in the Site Editor (block themes)
If you use a block theme, go to Appearance, then Editor, and open the Header template part. Replace or arrange blocks such as Site Logo, Navigation and Buttons. Save, and the new header applies across the whole site.
3. Method B: Use the Customizer (classic themes)
For many classic themes, go to Appearance, then Customize. Upload your logo under Site Identity, create a menu under Menus and assign it to the header location. Some themes also add header layout, color and sticky options in the same panel.
4. Method C: Build a custom header with Elementor
With Elementor Pro (or a header builder add-on such as ElementsKit), you get full design control:
- Go to Templates, then Theme Builder, then Header, and click Add New.
- Add a container with three areas: logo on the left, menu in the center, button on the right.
- Insert the Site Logo, Nav Menu and Button widgets and style them to match your brand.
- Set the display condition to Entire Site and publish.
5. Make the header mobile friendly
Most visitors browse on phones. Switch to the mobile preview and use a hamburger menu, keep the logo small, and make the call-to-action button large enough to tap easily. Hide secondary items such as phone numbers on small screens.
6. Add a sticky header carefully
A sticky header keeps navigation visible while scrolling. Keep it slim so it does not cover content, and test that anchor links still land in the right place.
7. Keep it fast and accessible
Use a compressed logo (SVG or optimized WebP), avoid heavy animations, and make sure text has strong contrast against the background. A lightweight header helps your Core Web Vitals and your Google rankings.
Final checklist
- Logo links to the homepage
- Menu has no more than 5 to 7 main items
- Button is visible on desktop and mobile
- Header looks right on phone, tablet and desktop
- Page speed is not affected
If you want a professional header built for your business, contact me and I will design one that fits your brand and loads fast.
Related reading
- How to Fix a Header Heading That Does Not Match the Background Picture
- Figma to WordPress: How to Convert a Design into an Elementor Website
- How to Speed Up a WordPress Website: 12 Practical Steps
Need help? See my WordPress development services.
