How to Create a Custom Header and Footer with Elementor Theme Builder

Your header and footer appear on every single page of your website. They carry your logo, your navigation, your contact details, and often your most important call to action. Yet many sites still rely on the theme's default header, which rarely matches the rest of a carefully designed Elementor site.

With the Elementor Pro Theme Builder, you can design both from scratch, visually, and control exactly where they appear. In this tutorial you will build a custom header with a logo, menu, and button, add a sticky behavior, create a matching footer, and set display conditions so everything shows up in the right place.

Before You Start

• You need Elementor Pro for the Theme Builder.
• Use a lightweight, Elementor-friendly theme such as Hello Elementor. It deliberately ships with minimal styling, so your templates take over cleanly.
• Create your WordPress menu first under Appearance > Menus, so it is ready to select.

Step 1: Create the Header Template

1. In your WordPress dashboard, go to Templates > Theme Builder.
2. Select Header and click to add a new one.
3. Choose a pre-designed block from the library, or close it to start with a blank canvas.

Starting blank is a great way to learn how the pieces fit together, so that is what we will do here.

Step 2: Build the Layout

A classic header has three zones: logo on the left, menu in the middle or right, and a call-to-action button at the end.

1. Add a container and set its direction to Row, with items aligned to the center and justified with space between.
2. Give it a sensible padding, for example 16 pixels top and bottom, and set the content width to match the rest of your site.
3. Add the Site Logo widget. It pulls the logo from Site Identity automatically, so you only maintain it in one place.
4. Add the Nav Menu widget and select your menu.
5. Add a Button such as "Get a Quote" and link it to your contact page.

Step 3: Make the Menu Work on Mobile

On small screens, a horizontal menu quickly runs out of space. The Nav Menu widget includes a dropdown or toggle mode:

• Set the breakpoint at which the menu switches to a hamburger toggle, usually tablet or mobile.
• Style the toggle icon so it is clearly visible and large enough to tap.
• Check the dropdown background and text colors, as they are styled separately from the desktop menu.

Consider hiding the header button on mobile and adding it as the last menu item instead, so the header stays uncluttered.

Step 4: Add a Sticky Effect

A sticky header keeps navigation within reach as visitors scroll. Select the outer header container, open Advanced > Motion Effects, and set Sticky to Top. Choose on which devices it should stick.

For a polished touch, use the Effects Offset setting together with the sticky state's styling to shrink the padding or add a background color once the visitor has scrolled a little. A header that becomes slightly more compact while scrolling feels modern without being distracting.

Step 5: Publish with Display Conditions

Click Publish and Elementor will ask where the header should appear. For most sites, choose Entire Site.

You can create more than one header and target them precisely. Examples:

• A transparent header for the home page only, layered over a hero image.
• A minimal header without navigation for landing pages.
• A different header for the shop or blog section.

When conditions overlap, the more specific condition wins, so a home page header takes priority over an Entire Site header.

Step 6: Build the Footer

Go back to the Theme Builder and add a Footer. A clear footer structure often uses three or four columns:

• Brand: logo and a short sentence describing what you do.
• Links: important pages, or a second menu.
• Contact: email, phone, and address with icons.
• Social and newsletter: social icons and an optional signup form.

Use a grid or row container with columns that stack on mobile. Add a thin bottom bar with copyright text. Use the Current Date Time dynamic tag with a year-only format, so "© 2026" updates itself every January.

Publish the footer with the condition Entire Site.

Design Tips for Headers and Footers

• Keep the header light. Seven menu items or fewer is a good target. Move the rest to the footer.
• Make the main action stand out. One accent-colored button is enough.
• Use your design system. Apply your global colors, fonts, or classes so the header matches every page.
• Add skip links and focus styles. Keyboard users should be able to reach the menu and skip to the main content.
• Check contrast on transparent headers. White text over a light photo is a classic readability trap.

Troubleshooting

• The old theme header still shows. Check that the template is published and the condition is set. Some themes need their own header disabled or require Elementor's theme locations support.
• Two headers appear. You may have both a theme header and an Elementor header active. Using Hello Elementor avoids this.
• The sticky header covers anchor targets. Add scroll padding to the page, or offset anchor positions by the header height.
• The menu dropdown is cut off. Look for overflow settings on parent containers and set them to visible.

Wrapping Up

With the Theme Builder, your header and footer finally become part of your design instead of something the theme decides for you. Build them once, set clear display conditions, and enjoy a consistent experience on every page, from the home page to the smallest blog post.