How To Hide Header In Elementor: Step-By-Step Guide For WordPress Websites

Elementor is one of the most powerful page builders available for WordPress, giving users full design flexibility without touching code. However, there are times when the default header gets in the way—whether you’re creating a landing page, sales funnel, maintenance page, or a fully custom layout. Knowing how to hide the header in Elementor allows you to design distraction-free pages and take greater control over your site’s appearance.

TLDR: You can hide the header in Elementor using several methods, depending on your theme and setup. The easiest way is by using Elementor’s Canvas or Full Width page template. You can also hide headers via theme settings, custom CSS, or Elementor Pro’s Theme Builder. The best method depends on whether you want to hide the header on a single page or across your entire website.

Why You Might Want to Hide the Header

Headers typically include navigation menus, logos, and sometimes contact information or social icons. While essential for most pages, there are situations where removing the header improves performance and user engagement.

• Landing pages: Removing navigation reduces distractions and increases conversions.
• Sales funnels: Keeps visitors focused on completing a purchase or signing up.
• Coming soon pages: Simplifies the layout for temporary pages.
• Custom designs: Allows full creative control without inherited theme styling.

Understanding your goal will help you select the right method.

Method 1: Use Elementor Canvas (Easiest Method)

This is the simplest and most beginner-friendly option. Elementor Canvas removes the header, footer, and sidebar entirely, giving you a blank page to work with.

Step-by-Step Instructions

1. Go to Pages in your WordPress dashboard.
2. Click Add New or edit an existing page.
3. Click Edit with Elementor.
4. In the lower-left corner, click the Settings (gear icon).
5. Locate the Page Layout option.
6. Choose Elementor Canvas from the dropdown menu.
7. Click Update or Publish.

What happens? Your header and footer disappear instantly, leaving you with a completely blank canvas.

Pros

• Extremely easy
• No coding required
• Works on individual pages

Cons

• Removes the footer as well
• Must be applied page-by-page

This method is ideal for landing pages or one-off custom designs.

Method 2: Use Elementor Full Width Template

If you want to keep your header but modify layout spacing—or in some themes remove certain header elements—the Full Width template is another built-in option.

How to Use It

1. Edit your page with Elementor.
2. Click the Settings icon.
3. Select Page Layout.
4. Choose Elementor Full Width.

Difference from Canvas:

• Full Width: Keeps header and footer, removes sidebar.
• Canvas: Removes everything.

Some themes allow additional header customization within this template, making it a flexible solution.

Method 3: Hide Header Using Theme Settings

Many modern WordPress themes (such as Astra, OceanWP, and GeneratePress) include per-page header controls.

Steps (May Vary by Theme)

1. Open the page in the default WordPress editor.
2. Scroll to the Theme Settings section below the editor.
3. Look for options like:

• Disable Header
• Disable Primary Navigation
• Transparent Header
• Hide Title

Enable the option to disable the header, then save your changes.

Why use this method? It allows you to keep more control, especially if you only want to remove certain parts of the header rather than eliminate it entirely.

Method 4: Hide Header With Custom CSS

If your theme doesn’t offer built-in options and you’re not using Elementor Pro, custom CSS is a reliable workaround.

Step 1: Identify Your Header Class

Right-click your header on the live site and click Inspect. Look for a class name such as:

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

Step 2: Add Custom CSS

Go to:

• Appearance → Customize → Additional CSS

Add something like:

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

Important: Replace 123 with your page ID.

How to Find the Page ID

• Go to Pages in the dashboard.
• Hover over your page.
• The URL preview will show post=123.

Pros

• Works with almost any theme
• Hides header on specific pages

Cons

• Requires minor technical knowledge
• Theme updates may change class names

Method 5: Use Elementor Pro Theme Builder

If you have Elementor Pro, you gain full control over headers using the Theme Builder feature.

How to Hide or Replace the Header

1. Go to Templates → Theme Builder.
2. Select Header.
3. Edit your existing header.
4. Click Display Conditions.
5. Exclude specific pages where you don’t want the header to appear.

Alternatively, you can create a blank header and assign it only to selected pages.

Why This Is Powerful:

• Control global headers
• Create multiple header designs
• Assign headers to specific categories or pages
• Hide headers without affecting the rest of the site

This is the most scalable and professional solution.

Hiding Header on Mobile Only

Sometimes you may want your header visible on desktop but hidden on mobile to improve UX or load speed.

Using Elementor Responsive Settings

1. Edit your header in Elementor (Pro required).
2. Select the entire header section.
3. Go to Advanced → Responsive.
4. Enable Hide on Mobile.

This makes your design adaptable without writing CSS.

Common Mistakes to Avoid

When hiding the header, users sometimes run into layout or functionality issues. Here’s what to watch out for:

• Losing navigation access: If you remove the header, users may not know how to navigate your site.
• Forgetting about mobile behavior: Always test across devices.
• Theme conflicts: Some themes override Elementor settings.
• SEO concerns: Make sure important links still exist elsewhere if needed.

Always preview changes before publishing.

Which Method Should You Choose?

The best method depends on your needs:

• Quick landing page? Use Elementor Canvas.
• Keep footer but remove header pieces? Check theme settings.
• Advanced customization across multiple pages? Use Elementor Pro Theme Builder.
• No Pro version available? Try custom CSS.

If you build marketing funnels regularly, investing in Elementor Pro offers the cleanest long-term solution.

Final Thoughts

Hiding the header in Elementor is easier than most people think. Whether you’re designing a high-converting landing page or creating a fully custom web experience, Elementor provides multiple ways to remove or control your header layout. From the simple Canvas template to advanced Theme Builder logic, there’s a solution for every skill level.

The key is choosing the method that aligns with your specific goals. Always test your page afterward to ensure navigation, responsiveness, and usability remain intact. With the right setup, removing your header can dramatically improve focus, conversions, and design flexibility.

Now that you understand how to hide the header in Elementor, you can confidently create distraction-free WordPress pages that look exactly the way you envision.