Elementor: How to Remove Header

The header is the section at the top of every page on your website. It typically contains your logo, navigation menu, and sometimes a call-to-action button or contact details. Headers come in several variations: static headers that stay in place as users scroll, sticky headers that follow the user down the page, and transparent headers that overlay the hero section.

At the theme level, your header is controlled by a template file called header.php. Every page on your site loads this file by default, which is why the header appears everywhere. WordPress themes handle header output at the PHP level, meaning you cannot remove the header for individual pages through the WordPress editor alone.

Elementor works differently. When you build with Elementor, you are editing the content area inside the header wrapper, not the wrapper itself. To control whether the header appears on a specific page, you need to work either at the template level (via Elementor Pro’s Theme Builder) or override the theme output using CSS. Understanding this distinction is key to choosing the right removal method for your situation.

There are several practical reasons to remove the header from specific pages. The most common is conversion optimization. Landing pages, sales pages, and checkout pages perform better without a navigation menu, because every menu link is an exit point. Remove the menu and you keep visitors focused on the one action you want them to take.

• Landing pages: A distraction-free layout keeps visitors focused on your offer. Navigation gives them a way out before they convert.
• Checkout and cart pages: Reducing exit options at the payment step can lower cart abandonment rates significantly.
• Coming soon pages: These typically have no menu to show, since the rest of the site is not ready yet.
• Video sales letter (VSL) pages: The entire page is built around one video. A header would compete for attention.
• Thank-you pages: Once someone has converted, you may want a minimal page with a single next step rather than a full navigation menu.
• Maintenance mode pages: Similar to coming soon pages, these do not need site navigation.

In each of these cases, the header actively works against the goal of the page. Removing it is not a design choice, it is a strategic one.

Elementor gives you three ways to remove the header from a page, each suited to a different situation. The right method depends on whether you have Elementor Pro, how comfortable you are with CSS, and whether you want to remove just the header or both the header and footer.

Method 1: Elementor Canvas Template (Free)

The Canvas template is built into Elementor Free. It strips the page of all theme-injected elements, giving you a completely blank canvas to build on. No header, no footer, no sidebar.

1. Open the page in Elementor.
2. Click the hamburger menu (three lines) in the top-left corner of the Elementor panel.
3. Go to Page Settings.
4. Under Page Layout, select Elementor Canvas.
5. Click Update to save.

Important limitation: Canvas removes both the header and the footer. If you need to keep your footer visible (for example, to display privacy policy and terms links), Canvas is not the right method. Use Method 2 or Method 3 instead.

Method 2: Theme Builder Display Conditions (Elementor Pro)

If you have Elementor Pro, you can control exactly which pages your header template appears on using Display Conditions. This method lets you hide the header on specific pages while leaving the footer and all other pages completely unchanged.

1. Go to Templates > Theme Builder in the WordPress admin.
2. Click on your active Header template.
3. Click Display Conditions.
4. Your current condition is likely set to display the header on the entire site. Add an exclusion.
5. Click Add Condition, set it to Exclude, then choose the specific page or page type you want to exclude.
6. Save the conditions.

The header template will now be hidden on any page you excluded. Because the footer has its own Display Conditions set separately, it is not affected by changes you make here.

Method 3: Custom CSS

If you do not have Elementor Pro and need to keep your footer, you can hide the header using CSS targeted to a specific page. This method requires finding the correct CSS class your theme uses for the header element.

To find the class, open the page in your browser, right-click anywhere on the header, and choose Inspect (or Inspect Element). Look for the outermost header HTML element in the code panel and note the value in its class attribute. Common class names include .site-header, header.site-header, #masthead, and #header.

Once you have the class, add this CSS to Appearance > Customize > Additional CSS or to your page’s Custom CSS in Elementor:

body.page-id-123 .site-header {
  display: none !important;
}

Replace 123 with your actual page ID (visible in the URL when editing the page in WordPress admin) and replace .site-header with the class you found using Inspect. The footer uses a different element and class, so it will remain visible.

The Canvas template is the quickest way to remove the header, but it takes the footer with it. Many pages still need a footer for legal links like Privacy Policy and Terms of Service. Here is how to remove only the header while keeping the footer intact.

With Elementor Pro: Use Theme Builder Display Conditions

This is the cleanest solution if you have Elementor Pro. Your Header template and Footer template each have their own Display Conditions, and changes to one do not affect the other.

1. Go to Templates > Theme Builder in the WordPress admin.
2. Open your active Header template.
3. Click Display Conditions and add an Exclude rule for the pages where you want to hide the header.
4. Save the conditions.
5. Do not touch your Footer template. Its Display Conditions are separate, so the footer continues to appear on all pages it was set to show on.

With CSS Only (No Elementor Pro Required)

Hiding just the header with CSS is straightforward because the header and footer use different HTML elements and classes. Add this to Appearance > Customize > Additional CSS:

body.page-id-123 .site-header {
  display: none !important;
}

This targets only the header element on your specific page. The footer element (usually .site-footer or #colophon) is a completely separate element and is not affected by this rule.

Without Pro and Without Custom CSS: Use a Plugin

If you prefer not to write CSS and do not have Elementor Pro, there are free plugins designed specifically for this purpose:

• HFE (Header Footer for Elementor) by Brainstorm Force: A popular free plugin that adds per-page display controls for headers and footers built with Elementor.
• Elementor Header & Footer Builder: Lets you build custom headers and footers in Elementor Free and control which pages they appear on, with include and exclude rules per template.

With either plugin, you set the header template to exclude specific pages and leave the footer template on its own settings. Both header and footer are controlled independently, the same way Elementor Pro’s Theme Builder works.

If you have followed one of the methods above and the header is still showing, one of a few common issues is usually responsible. Work through these in order.

Header Still Shows After Selecting Canvas Template

The most common cause is a page caching plugin serving an older version of the page. Your page template change is saved, but visitors (and you) are still seeing a cached copy of the previous layout.

Fix: Go to your caching plugin (WP Rocket, W3 Total Cache, LiteSpeed Cache, etc.) and clear the cache for that page or clear the entire site cache. Then reload the page in a private or incognito browser window. Also confirm you clicked Update in Elementor after changing the Page Layout setting. The change does not save automatically.

Cannot Find the Right CSS Class for the Header

Every theme uses a different class or ID for its header element. If your CSS rule is not working, you may be targeting the wrong selector.

To find the correct one: open the page in Chrome or Firefox, right-click the header area, and choose Inspect. Look at the HTML panel for the outermost element that wraps the entire header. Check its class and id attributes. Try these common fallbacks until one works:

• .site-header
• header.site-header
• #masthead
• #header
• .header-main

Header Is Hidden on Desktop but Still Shows on Mobile

Some themes output a completely separate mobile header element. The Canvas template applies universally to all screen sizes, so if the header still shows on mobile after using Canvas, your theme is injecting a separate mobile header outside the standard header.php template.

Check your theme’s Customizer settings (Appearance > Customize) for options like “Mobile Header” or “Header on Mobile.” Disable or hide that setting. For the CSS method, the body.page-id-123 selector applies on all screen sizes, but you may need a second rule targeting the mobile header element specifically.

Header Is Gone but a Gap Remains at the Top of the Page

When you use display: none, the header element is hidden but some themes still reserve space for it in the page layout. This leaves a blank gap at the top of the page.

Update your CSS rule to collapse that space as well:

body.page-id-123 .site-header {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}