The header is the one part of a WordPress site every single visitor sees, on every page, regardless of what they actually came for. That makes it disproportionately important relative to how much time most site owners spend on it. A cluttered or dated-looking header colors a visitor’s impression of the entire site before they’ve read a word of actual content.
This guide covers three ways to build one: your theme’s built-in Customizer, a full custom build with Elementor, and dedicated header plugins for cases where neither of those quite fits.
What a Header Actually Needs to Do
Before touching any settings, it’s worth being clear about the header’s job, since that clarity shapes every decision that follows. A header needs to establish identity (the logo, immediately recognizable), provide navigation (the menu, clear and not overloaded), and often prompt an action (a button, a phone number, a search icon), all within a compact horizontal space that’s visible without scrolling.
Everything beyond those three jobs is optional, and a header trying to do too much, packed with social icons, a language switcher, a newsletter signup, and three separate menus, usually does all of it worse than a header that picked its two or three priorities and executed them cleanly.
Method 1: Your Theme’s Built-In Customizer
This is the fastest path for most sites and doesn’t require any additional plugin.
Log into your WordPress dashboard and go to Appearance, then Customize. Most modern themes expose a Header or Header & Navigation section directly in this panel; the exact label and available options vary by theme, but the core capabilities are usually similar across most.
Upload your logo through the designated logo upload field, typically found right at the top of the header section. Most themes let you set separate sizing for desktop and mobile, worth checking specifically since a logo sized well for a wide desktop header can look oversized or cramped once the layout compresses to mobile width.
Configure your navigation menu next. If you haven’t created one yet, go to Menus within the same Customizer, click Create New Menu, add the pages you want included, and assign it to whichever menu location your theme labels as the primary or header menu. Menu structure matters as much as the header’s visual styling: five or six clear top-level items generally outperform a menu with ten items and three levels of dropdown nesting, since visitors scan a header menu quickly and a simpler structure is easier to parse at a glance.
Depending on your theme, you may also find options for a search icon, social media icons, a phone number or contact info display, and background or text color controls specific to the header. Explore these, but resist the urge to enable every available option; each addition competes for the same limited horizontal space and visitor attention.
Click Publish once you’re satisfied. Changes made in the Customizer are visible only to you in preview until this step, so nothing goes live prematurely while you’re experimenting.
Advantages of the Customizer approach
No coding, no additional plugin weight, and everything stays tightly integrated with your theme’s existing design system, meaning fonts, colors, and spacing generally stay consistent with the rest of the site automatically rather than requiring manual matching.
Method 2: A Fully Custom Header With Elementor
For more control than a theme’s Customizer typically offers, overlapping elements, precise spacing, conditional display rules for different page types, Elementor’s Theme Builder feature (part of Elementor Pro) is the more capable option.
Install Elementor if it isn’t already active, through Plugins, then Add New. Elementor Pro specifically is required for the Theme Builder feature that governs site-wide headers; the free version of Elementor doesn’t include this capability.
Once Elementor Pro is active, go to Templates, then Theme Builder, then Header, then Add New Header. You can start from a blank canvas or choose one of Elementor’s pre-built header templates as a starting structure to customize rather than build from nothing.
Inside the Elementor editor, build the header using standard widgets: an Image widget for your logo, a Nav Menu widget for navigation (which pulls from any menu you’ve already created under Appearance, then Menus), and additional widgets, a Button, a Search icon, Social Icons, as needed for your specific header’s job.
Elementor’s responsive controls let you adjust spacing, sizing, and even hide specific elements at different breakpoints directly in the editor, switching between desktop, tablet, and mobile preview using the device icons at the bottom of the editing panel. This granular responsive control is the main advantage over a theme Customizer, which typically offers less precise breakpoint-specific adjustment.
Once your design is complete, click Publish. Elementor will prompt you to set display conditions, Entire Site, Homepage Only, specific page types, giving you control over exactly where this custom header applies, useful if you want a different header treatment on, say, a landing page than the rest of the site.
Method 3: Dedicated Header Plugins
If your theme’s Customizer feels too limited and you don’t want the overhead of Elementor Pro just for header building, standalone header plugins fill that middle ground.
Elementor Header & Footer Builder (the free version, distinct from Elementor Pro’s Theme Builder) offers a lighter-weight path to a custom header using Elementor’s free-tier editor, without requiring the paid upgrade.
Sticky Header plugins, several exist under similar names, add scroll-based behavior specifically: keeping the header visible and pinned to the top as a visitor scrolls down the page, rather than scrolling out of view with the rest of the content. This is a smaller, more targeted feature than a full header rebuild and is worth adding on top of whichever header-building method you’ve already used, rather than as a replacement for one.
Install through Plugins, then Add New as usual, then follow the specific plugin’s settings screen to configure and assign your header design.
Making the Header Responsive: The Part That Actually Matters Most
Regardless of which method you use, a header that looks polished on desktop but breaks down on mobile has failed at its actual job, given how much traffic arrives on phones. A few specific things to check.
Logo sizing at mobile width: a logo sized for a wide desktop header often needs a smaller, sometimes simplified version (a mark or icon instead of a full wordmark) at narrow mobile widths, where horizontal space is genuinely scarce.
Menu collapse behavior: most themes and builders automatically convert a horizontal menu into a hamburger icon below a certain breakpoint. Confirm this actually triggers at a sensible width for your specific menu length, a menu with many items may need to collapse earlier than a shorter one to avoid the header row wrapping or overflowing before the hamburger kicks in.
Tap target sizing: any interactive element in the header, menu toggle, search icon, button, needs to be large enough to tap accurately on a touchscreen, generally at least 40 by 40 pixels. A header that looks fine visually but has cramped, hard-to-tap icons creates real friction for mobile visitors even if nothing is technically broken.
Testing at Real Breakpoints, Not Just Resizing a Browser Window
Resizing a desktop browser window narrower gives a rough approximation of mobile layout but isn’t a substitute for checking an actual device or, at minimum, your browser’s dedicated device emulation mode (in Chrome DevTools, for instance), which more accurately reflects touch interaction and real device viewport dimensions rather than just a narrow desktop window.
Check at least three widths before considering a header finished: a common desktop width, a tablet width around 768px, and a common mobile width around 390px. A header that works at all three has covered the range most of your actual traffic will fall into.
A Worked Example: Building a Header for a Local Service Business
Concrete steps help more than abstract advice. Say you’re building a header for a local plumbing company’s site, where the priorities are clear brand identity and an immediately visible phone number, since a visitor in an active plumbing emergency wants to call, not browse.
Using the Customizer approach: upload a logo sized appropriately for both desktop and the smaller mobile variant your theme supports. Build a simple menu with core items only, Services, About, Contact, avoiding a sprawling menu structure that would compete with the actual point of the header. Enable your theme’s phone number display option if it has one, positioned prominently, ideally paired with a click-to-call link on mobile specifically, so a visitor on a phone can tap it and dial immediately rather than needing to manually copy the number.
If the theme’s Customizer doesn’t support a prominent phone display well, this is a case where Elementor’s Theme Builder earns its complexity: build a header with the phone number as a styled, clickable element using a Button widget linked with a tel: URL, sized and positioned deliberately rather than left to whatever a theme’s default styling happens to produce.
Accessibility in the Header Specifically
Because the header appears on every page, accessibility gaps here affect every single visit rather than just one page. A handful of checks are worth doing regardless of which building method you used.
Keyboard navigation: tab through your header using only the keyboard, no mouse, and confirm every interactive element, menu items, dropdown triggers, the search icon, the mobile hamburger toggle, is reachable and shows a visible focus indicator as you tab through. A header that only works with a mouse locks out visitors using keyboard navigation or certain assistive technologies entirely.
Dropdown menu behavior: if your navigation includes dropdown submenus, confirm they’re operable via keyboard, typically opening on focus or Enter key press, not exclusively on mouse hover, since hover has no direct keyboard equivalent.
Logo alt text: the logo image needs meaningful alt text, typically your business or site name, since it’s usually also functioning as a link back to the homepage and screen reader users rely on that alt text to understand what the link does.
Color contrast on header text and buttons: a header built with a background image or gradient sometimes ends up with navigation text that looks fine to the person who built it but fails contrast requirements against certain parts of a variable background. Check contrast specifically at the points where text overlaps the busiest part of any background image.
Troubleshooting Common Header Problems
Logo looks blurry or pixelated: almost always an upload resolution issue, the source image wasn’t large enough for the display size it’s being rendered at. Re-upload the logo at a higher native resolution (2x the display size at minimum, more for high-density displays) rather than trying to fix blur after the fact with sizing settings.
Menu items wrap to a second line unexpectedly: usually means the menu has more items, or longer item labels, than the available horizontal space comfortably supports at that specific viewport width. Shorten menu labels, reduce the number of top-level items, or adjust the breakpoint where the theme switches to a mobile hamburger menu earlier than its default setting.
Sticky header overlaps content when a visitor clicks an anchor link: a common issue where clicking an in-page anchor link (jumping to a specific section) lands the visitor with that section’s heading hidden directly behind the sticky header. This typically needs a small CSS offset, scroll-margin-top on the target elements, or a JavaScript adjustment accounting for the header’s height, added specifically to compensate for the sticky header’s occupied space.
Header looks correct in the editor but different on the live site: usually a caching issue rather than an actual configuration problem. Clear your site’s caching plugin and any CDN cache after header changes specifically, since header markup often gets cached more aggressively than regular post content given how rarely it’s expected to change.
Header Performance: Why It Matters More Than Other Sections
Every page load includes the header, which means any performance cost baked into it, an oversized logo image, a heavy sticky-header script, extra web fonts loaded just for header typography, gets paid on every single page view rather than once. A small inefficiency here compounds across a site’s total traffic in a way the same inefficiency in a single blog post never would.
Run your homepage through PageSpeed Insights after finalizing a new header design specifically, not just once at the end of a broader site review, and check whether the header introduced any new render-blocking resources or layout shift, both of which directly affect Core Web Vitals scores tied to real user experience and search ranking signals.
Common Mistakes When Building a Header
Overloading the header with every available feature a theme or builder offers, social icons, a search bar, a language switcher, multiple menus, results in visual competition where nothing gets clear priority and the header reads as cluttered regardless of how polished any individual element looks.
Choosing a logo file that isn’t optimized for the web, uploading a multi-megabyte PNG when a properly compressed SVG or optimized PNG would load faster and look identical, is a common and easily avoidable performance cost, especially painful since the header loads on every single page.
Skipping the mobile check entirely, or checking only by narrowing a desktop browser window rather than testing genuine mobile-width behavior, is a third. Given how much of most sites’ traffic arrives on phones, a header that hasn’t been genuinely verified at mobile width is an unfinished header regardless of how good it looks on the wide screen it was built on.
Forgetting to set a sticky or non-sticky decision deliberately. A header that scrolls out of view forces a visitor to scroll back to the top to navigate elsewhere; a sticky header that’s poorly implemented can instead eat up valuable vertical space on a mobile screen throughout the entire scroll. Neither choice is universally correct, it depends on the site, but it should be a deliberate decision rather than whatever the theme happened to default to.
Frequently Asked Questions
Should my header be sticky, staying visible as visitors scroll down the page?
It depends on the site. Content-heavy sites, blogs, documentation, news, generally benefit from a sticky header since it keeps navigation available throughout a long scroll. For a landing page prioritizing a single hero message, a non-sticky header can sometimes give the initial view more visual breathing room. Test both if you’re unsure which serves your specific page better.
Do I need Elementor Pro specifically, or can the free version build a full header?
The free version of Elementor can add custom HTML or widgets to individual page content, but the site-wide Theme Builder feature that lets you build and assign a header across the entire site requires Elementor Pro. The free-tier Elementor Header & Footer Builder addon offers a lighter alternative if you don’t want the Pro upgrade.
How do I know if my header is too cluttered?
A rough but useful test: can a first-time visitor identify what the site is and find the primary navigation within about three seconds of looking at the header alone? If the honest answer is no, or if they’d need to actively search through competing elements first, the header likely has more in it than it needs.
What’s the right image format for a header logo?
SVG is generally the best choice for a logo specifically, since it’s vector-based, scales cleanly to any size without quality loss, and typically produces a smaller file size than an equivalent PNG for simple logo graphics. If your logo includes complex gradients or photographic elements that don’t work well as SVG, an optimized, compressed PNG is the fallback.
Building a Header That Actually Works
A good WordPress header isn’t defined by how many features it packs in, it’s defined by how quickly a visitor understands where they are and what to do next. Whichever method you choose, Customizer, Elementor, or a dedicated plugin, keep the header’s actual job in view: identity, navigation, and maybe one clear action, tested honestly at the widths most of your visitors will actually be using.
