Building headers and footers with Elementor Theme Builder

In Elementor Pro, you build the header and footer once under Elementor > Theme Builder and set them to display on the Entire Site. Keep the header to a logo, five to seven menu items and one main action, keep it slim if it’s sticky on mobile, and treat the footer as a practical directory. Your header is the only part of your website that appears on every single page, at the top, before anything else loads. It’s also the part most likely to be overstuffed. We regularly see headers carrying a logo, nine menu items, two phone numbers, a search bar, social icons, a “Book now” button and an announcement strip. On a phone, that’s the whole screen gone before the visitor sees a word of content.

Elementor Pro’s Theme Builder lets you design the header and footer once and apply them across the site. This is how we approach it on client builds.

What the Theme Builder does

Without Theme Builder, your header and footer come from your WordPress theme, and you’re limited to whatever options the theme gives you. With it, you build the header and footer in Elementor like any other layout, and Elementor shows them in place of the theme’s versions.

You’ll find it in WP Admin under Elementor > Theme Builder. Create a new Header or Footer, design it, then click Publish. At that point Elementor asks where the template should appear. Those rules are called display conditions.

Display conditions, explained with real examples

A display condition says “show this template on these pages”. You can include or exclude pages, and stack several conditions on one template. Elementor’s list of condition options runs from Entire Site down to individual pages, posts, categories and authors.

For most small business sites, the setup is simple: one header and one footer, both set to Entire Site. That’s it. Resist complicating it.

The cases where multiple headers make sense:

A landing page for ads. You might want a stripped-back header with just the logo and a phone number, so visitors from a Google Ads campaign aren’t tempted off the page. Create a second header, set it to Include > Singular > Page > your landing page, and leave the main header on Entire Site. The more specific condition should win, but always check the landing page afterwards to be sure.

A shop section. An online store might want a header with a cart icon, while the rest of the site doesn’t. Set the shop header on your WooCommerce pages and the standard header everywhere else.

Several locations. A business with two clinics might want each location’s pages to show that location’s phone number in the header. This works, but it’s fiddly to maintain. We cover better ways to handle it in our guide to sites for businesses with several locations.

If two templates are set to the same condition, Elementor warns you about the conflict. Take the warning seriously. Two headers fighting for the same page is one of the classic causes of a header that “randomly” changes.

Sticky headers: yes, but make them small

A sticky header stays at the top of the screen as you scroll. In Elementor Pro, it’s set on the header’s outer container under Advanced > Motion Effects > Sticky. You choose whether it sticks to the top or bottom and which devices it sticks on. The options are in Elementor’s motion effects documentation.

Sticky headers are useful when people need to call or book from anywhere on the page. They’re a nuisance when they eat a third of a phone screen. Our approach:

• On desktop, a sticky header is usually fine, and it’s worth making it shrink a little on scroll. Elementor’s sticky settings include an Effects Offset, which adds a CSS class to the header once the visitor has scrolled a set distance. With a few lines of custom CSS aimed at that class, you can reduce the padding or switch to a solid background as the page scrolls.
• On mobile, keep the sticky bar slim. Logo, menu icon and one action (usually a phone icon for tradies, or “Book” for practices). Nothing else.
• Check the transparent-header trap. If the header sits over a hero image when the page loads, make sure it switches to a solid background once it becomes sticky. Otherwise your menu ends up floating over body text, unreadable.

Mobile menus

Elementor gives you a few ways to handle navigation on phones.

The WordPress Menu widget (previously called Nav Menu) uses a menu you build under Appearance > Menus, and collapses to a “hamburger” icon at a breakpoint you choose. For most small sites, this is all you need. Set the dropdown to collapse at tablet size, not just mobile, because a seven-item menu rarely fits on a portrait iPad either.

The newer Menu widget lets you build mega menus with images, columns and other widgets inside the dropdown. It’s built on Elementor’s containers and nested elements features. It’s powerful, but on a ten-page site it’s usually overkill.

The Off-Canvas widget gives you a panel that slides in from the side, which you can fill with anything: menu, contact details, a booking button. Good for sites that want the mobile menu to do a bit more than list links.

Whichever you use, test the mobile menu with your thumb on a real phone. Can you open it, tap a link and close it again without zooming? Is the close button obvious? Do submenus expand properly, or do they fire the parent link instead?

Keep the header content short

A header has one job: help people get where they’re going. What we usually put in, in order of priority:

1. Logo, linking to the homepage
2. Main menu, ideally five to seven items
3. One primary action: Call, Book, or Get a quote
4. Phone number as text on desktop (if phone calls matter to the business)

What we usually leave out, or move to the footer: social media icons, secondary phone numbers, email addresses, search bars on small sites, and announcement strips that never get updated. Every item in the header competes with the one action you want people to take.

The same thinking applies to the header’s weight. Large logo files, icon libraries, animated effects and heavy mega menus all load on every page. If speed is a concern, the header is the first place to look, which is one reason it features in our guide to Elementor and site speed.

What goes in the footer

The footer is where people go when they’ve scrolled to the end and still need something. Treat it as a practical directory rather than decoration:

• Contact details: phone, email, address or service area
• Opening hours (if they matter)
• Key links: services, about, contact, privacy policy
• Licence or registration numbers where your industry requires or expects them
• Social links
• ABN and business name

Keep it readable. Footers often end up in pale grey text on dark grey backgrounds, which often fails a basic contrast check and is hard to read for anyone over 40.

When your header disappears

If your new header shows in the editor but not on the live site, Elementor’s missing header troubleshooting guide lists the usual suspects. In our experience, it’s nearly always one of these:

1. The template is still a draft, not published.
2. It has no display condition set.
3. The page uses the “Elementor Canvas” layout, which hides headers and footers by design.
4. A “Hide on mobile” toggle has been switched on in the header container’s Advanced settings.
5. A cache (plugin, host or Elementor’s own) is serving an old version. Clear it, then check again in a private window.

If none of those is it, a missing header is a quick Elementor fix for someone who can see the site.

Before you publish

Run through this on every new header or footer:

• Logo links to the homepage
• Every menu link works, including submenus
• Phone link uses tel: and dials when tapped
• Mobile menu opens, closes and is usable one-handed
• Sticky header doesn’t cover content or anchor links on mobile
• Display conditions are set, with no conflicts
• Footer text passes a contrast check

Browse our portfolio to see how differently headers play out for trades, practices and shops. If yours needs more than a tidy-up, it’s worth looking at what a proper rebuild includes.