How to Edit the Header in Elementor

Quick answer: if the header was built with Elementor Pro, go to Templates → Theme Builder → Header, open the active header, and choose Edit with Elementor. Save the template and verify its display conditions. If no Header template exists, the active WordPress theme—not Elementor—probably controls it.

Take a screenshot of the existing desktop and mobile header before editing. Headers contain primary navigation and conversion links, so a small visual change can create a site-wide usability problem.

First, identify who controls the header

A page containing Elementor content does not mean Elementor owns its header. Check in this order:

1. Templates → Theme Builder → Header or Elementor → Theme Builder.
2. Appearance → Editor for a block-theme Header template part.
3. Appearance → Customize or the theme options for a classic theme.
4. A separate header/footer builder plugin.
5. Custom theme template files.

Edit only the actual source. Creating a second header to cover the first often produces duplicate navigation, extra markup and inconsistent mobile behavior.

Edit an Elementor Theme Builder header

Elementor’s official Theme Builder documentation describes the interface for headers, footers and other site parts.

1. Open Templates → Theme Builder.
2. Select Header.
3. Find the published template with an active display condition.
4. Click Edit with Elementor.
5. Modify the logo, Navigation Menu widget, buttons or container layout.
6. Select Update.
7. Review the display conditions before closing.

Menu labels and destinations normally come from WordPress navigation settings. If you need to change the menu structure rather than its appearance, edit the assigned WordPress menu and then confirm the Elementor widget uses it.

Set the correct display conditions

Display conditions decide where a Theme Builder template appears. For a global header, use an include condition covering the entire site. Add exclusions only for intentional landing pages, checkout flows or other special layouts.

If the header appears on the homepage but not a post, inspect conditions before rebuilding it. Overlapping header templates can also compete; document which template owns each section of the site.

After changing conditions, test:

• homepage;
• a normal page;
• a single post;
• category or archive;
• WooCommerce product and checkout pages if present;
• a logged-out private window.

Edit the responsive header

Use Elementor’s responsive controls to inspect desktop, tablet and mobile states. Do not simply hide the desktop menu without providing an accessible mobile alternative.

Check:

• logo width and meaningful alternative text;
• menu toggle name and keyboard operation;
• dropdown focus states;
• tap target size;
• header height at 200% zoom;
• sticky behavior and content overlap;
• contrast over every background.

Avoid absolute positioning for the primary navigation unless the layout is thoroughly tested across languages and zoom levels.

If the theme controls the header

With a block theme, open Appearance → Editor, select the relevant template or Header pattern, and edit it with WordPress blocks. With a classic theme, use Appearance → Customize or the documented theme panel.

Do not install Elementor Pro only to change a logo or menu that the theme already exposes cleanly. Use one system of ownership for the header.

Elementor notes that Theme Builder compatibility depends partly on how themes register their template locations. Its compatibility guidance is worth checking before replacing only half of a theme’s header/footer structure.

Fix a missing Elementor header

Work through these checks:

1. Confirm the template status is Published.
2. Review include and exclude conditions.
3. Make sure Elementor Core and Pro are both active and compatible.
4. Check whether the page uses a Canvas layout that intentionally removes theme areas.
5. Clear Elementor-generated files and relevant site/CDN caches.
6. Inspect browser console and PHP logs.
7. Test for a theme or plugin conflict on staging.

If recent edits do not appear, follow WordPress Changes Not Showing to identify the exact cache layer.

Fix duplicate headers

Two headers generally mean two systems are active. Find the duplicate in page source or browser developer tools and identify whether its classes belong to the theme or Elementor.

Then disable the unwanted header through its supported template or layout setting. CSS such as display:none leaves duplicate navigation in the HTML and can still confuse screen readers, keyboard users and crawlers.

SEO checks after editing

Headers strongly affect internal linking. After publishing:

• confirm every navigation URL returns the intended status;
• keep anchor text descriptive;
• avoid linking both logo and menu to inconsistent homepage variants;
• check that sticky headers do not hide anchored headings;
• verify the mobile menu contains essential links;
• compare crawlable links in the rendered HTML.

Finally, test the header without being logged in. WordPress admin bars and uncached previews can hide spacing or caching problems visitors will see.