Can I hide the header on a whole page group (like /shop/ or a category) in Elementor?

Yes, with Elementor Pro. Templates → Theme Builder → Header → open your header template → Display Conditions → Exclude → add a rule like 'In WooCommerce Products Archive' or 'Pages → All children of About'. Without Pro, use CSS body selectors: body.woocommerce-shop header, body.parent-pageid-42 header { display: none !important; } — .parent-pageid-42 means 'all children of page ID 42'.

WordPress / Elementor April 24, 2026 8 min read

How to Hide Header in Elementor WordPress (2026) — 3 Methods + One-Click Fix

Q: How do I hide the header in Elementor on only one page?

Open the page in the Elementor editor. Click the gear icon at the bottom-left to open Page Settings. Toggle on 'Hide Title'. If the page still shows the theme's header (logo + menu), add a scoped CSS snippet to Elementor → Custom CSS (Pro) or Appearance → Customize → Additional CSS: body.page-id-123 .site-header, body.page-id-123 header#masthead { display: none !important; }. Replace 123 with your actual page ID (visible in the URL when you edit the page in wp-admin).

Q: What's the difference between 'Hide Title' and hiding the full header?

'Hide Title' in Elementor Page Settings only hides the H1 page title that the theme renders above your content — it does not hide the site header with logo, navigation menu, or search bar. To hide the full site header you need either a CSS rule targeting the theme's header element ( or .site-header) or, with Elementor Pro, a Theme Builder conditional that disables the custom Elementor Header for that page.

Q: How do I hide the Elementor header on a landing page only?

The cleanest way: in the page's Page Settings (gear icon, Elementor editor), change Page Layout to 'Elementor Canvas'. Canvas strips the theme's header, footer, and sidebar — leaving you a blank page for your landing. If you don't want Canvas-blank (e.g. you still want the footer), use Elementor Pro Theme Builder: Templates → Theme Builder → Header → Display Conditions → Exclude → Specific Page → pick the landing page.

Q: Why does my display:none CSS not hide the Elementor header?

Three common reasons. (1) The selector is wrong — open the page, inspect the header element, and copy the exact class or ID from DevTools. Common correct selectors: .site-header, header#masthead, .elementor-location-header. (2) Your theme's CSS has higher specificity — add !important and/or prefix with body: body .site-header { display: none !important; }. (3) The header is rendered inside an Elementor template loaded via Theme Builder — CSS hides it but it still renders, which hurts performance; use Theme Builder display conditions instead.

Half the people asking this want to hide the site navigation bar (logo + menu); the other half want to hide the page title H1. This guide covers both. The #1 fix for the site nav header on a single landing page is Page Attributes → Template → Elementor Canvas — built into Elementor core (free, no Pro), one click, no CSS. For the page title, use Elementor's Hide Title toggle. Scoped CSS is kept below as a fallback for stubborn themes.

mysite.com/landing/ · Elementor editor

My Business

HomeAboutServicesBlogContact

Get Demo

Header competes with CTA

Page Template = Elementor Canvas · Page 421 only

Landing Page

Convert more visitors with a focused, header-free page.

One message. One CTA. Built in Elementor.

Start Free Trial →

Rest of site (untouched) Home / About / Services — still keeping the header

SimpleReview PRO

⚠ WHICH HEADER?

🧭 Site navigation headerlogo + menu bar · most common

📝 Page title (H1)Elementor "Hide Title" toggle

Detected

Site navigation header on landing page
Theme: Astra · Page ID 421

Fix plan

Flip Page Attributes → Template → Elementor Canvas (free, built-in, no code). Fallback: scoped CSS for themes that override Canvas.

PR diff

- _wp_page_template: default

+ _wp_page_template: elementor_canvas

One meta change. Rest of site untouched.

✓ PR opened

flip _wp_page_template → elementor_canvas
child-theme safe · 1 meta key · page 421 only

One click → Page Template = Elementor Canvas → site nav header gone on this page only

Don't want to look up page IDs, selectors, and CSS syntax? → SimpleReview lets you click the header element in your browser, type what you want, and get a PR with a scoped CSS override added to your child theme.

Key Takeaways

For a single landing page, the cleanest trick is Page Settings → Page Layout → Elementor Canvas — strips header, footer, and sidebar in one click.
For per-page header hide without Canvas, use a scoped CSS snippet: body.page-id-XX header { display: none !important; }.
Elementor Pro adds a proper solution — Theme Builder → Header → Display Conditions → Exclude specific pages or page groups. Header isn't even rendered.
Hide Title in Page Settings only hides the H1 — not the site header with logo and menu.
Always write CSS to a child theme or to Elementor Custom CSS — direct parent theme edits get wiped on every update.

Method 1: Elementor Page Settings (Hide Title + Canvas Layout)

If the "header" you want to hide is actually the theme's page title block (the big H1 above your content), the toggle is built in:

Open the page in Elementor editor.
Click the gear icon at the bottom-left to open Page Settings.
Toggle on Hide Title. The theme's H1 disappears immediately in the preview.
If you also want to hide the site header (logo + menu bar), change Page Layout from "Default" to Elementor Canvas. Canvas strips the theme's header, footer, and sidebar — you get a blank slate to build your landing on.

Canvas vs Full Width vs Default: Canvas removes header, footer, sidebar. Elementor Full Width removes the sidebar but keeps header and footer. Default respects the theme's layout.

Canvas works on Elementor free — you don't need Pro for it. Downside: if you want to keep the footer (for legal links, contact info) and only hide the header, Canvas is too aggressive. Use Method 2.

Method 2: Scoped CSS Snippet (Keeps the Footer, Hides the Header)

WordPress adds a unique body class like page-id-123 for every page. You can use that class as a scope so the CSS only affects one page and leaves everything else untouched.

Step 1 — Find your page ID

In wp-admin, open Pages → All Pages, hover the page, and click Edit. The URL will look like …/post.php?post=421&action=edit — 421 is the page ID.

Step 2 — Find the correct header selector

Open the page in Chrome, right-click on the header, choose Inspect. Common correct selectors, depending on theme:

header#masthead — Twenty Twenty-One/Twenty Twenty-Two, many classic themes.
.site-header — Astra, GeneratePress, Kadence.
.elementor-location-header — Elementor Pro Theme Builder custom header.
header.ast-primary-header — Astra Pro.

Step 3 — Add the scoped CSS

Go to Appearance → Customize → Additional CSS (or Elementor → Custom CSS, Pro), and paste:

/* Hide the site header on page ID 421 only.
   Replace 421 with your page ID. */
body.page-id-421 :is(.site-header, header#masthead, .elementor-location-header) {
    display: none !important;
}

/* Optional: remove the gap the header left behind */
body.page-id-421 :is(#content, .site-content) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

Need it on a page group instead of one page? Swap the body class:

/* All children of page ID 42 (e.g. /services/seo/, /services/ads/) */
body.parent-pageid-42 header { display: none !important; }

/* All WooCommerce shop / product archive pages */
body.woocommerce-shop header,
body.post-type-archive-product header { display: none !important; }

/* Every single blog post (hide header only in blog reading view) */
body.single-post header { display: none !important; }

Don't hide the whole <header> site-wide. That removes navigation from every page and destroys usability. Always scope with body.page-id-XX, .parent-pageid-XX, or a similar body class.

Method 3: Elementor Pro Theme Builder Conditional Display

If you already have Elementor Pro, the header is probably a Theme Builder template, not a theme file. That means you can conditionally not render it — far better than CSS hiding (the header never loads, zero JS/CSS/HTTP cost).

Go to Templates → Theme Builder in wp-admin.
Hover your Header template and click Edit Conditions (or open the template and click the gear icon → Display Conditions).
You'll have a default rule like Include → Entire Site. Click Add Condition.
Pick Exclude from the dropdown, then the scope:
- Specific Page → pick your landing page.
- Pages → All children of → pick a parent (hides header on the whole branch).
- In WooCommerce Products → hides on every product page.
- By Custom Field / URL / Role → advanced conditional logic.
Click Save & Close. Visit the excluded page — the header isn't there, and it isn't even rendered in the HTML source.

This is the "right" way in 2026. CSS hiding is a workaround; Theme Builder conditions are the native feature. If you're on Pro, prefer this every time.

Method Comparison

Method	Cost	Header removed from DOM?	Per-page / per-group control?	Difficulty
Page Settings → Canvas (M1)	Free	Yes	Per page (also kills footer)	None
Scoped CSS (M2)	Free	No — hidden but in source	Page, page-group, template	Low
Theme Builder conditional (M3)	Pro ($59/yr)	Yes — not rendered	Full conditional logic	None
Edit theme's header.php directly	Free	Yes	Needs PHP logic	Medium + wiped on update

How SimpleReview Handles This

If you don't want to look up page IDs, figure out the correct header selector, or worry about whether your theme uses .site-header or #masthead, SimpleReview does all of that from a single click:

Install the Chrome extension and open the page where you want the header gone.
Click the SimpleReview icon, then click directly on the header element.
Type "Hide header on this page only" and click Fix it. SimpleReview inspects the DOM, picks the most specific selector, scopes it to the current body.page-id-* class, and opens a PR that adds the snippet to your child theme's style.css.

The result is the same as Method 2 — but you don't read DevTools, and the PR is reviewable before it hits production.

Hide the Elementor Header in One Click

Click the header → SimpleReview picks the right selector, scopes it to the current page, and opens a PR against your child theme.

Install SimpleReview Chrome Extension →

Prefer a WordPress plugin? Download SimpleReview for WordPress → — installs in 30 seconds, no Chrome required.

Frequently Asked Questions

How do I hide the header in Elementor on only one page?

Open the page in Elementor → gear icon (Page Settings) → toggle Hide Title. If the site header (logo + menu) is still there, add to Appearance → Customize → Additional CSS: body.page-id-123 .site-header, body.page-id-123 header#masthead { display: none !important; } — replace 123 with your page ID.

What's the difference between Hide Title and hiding the full header?

Hide Title only hides the page's H1. It does not touch the site header with logo, navigation, or search bar. To hide the full header use scoped CSS (Method 2) or, with Pro, Theme Builder display conditions (Method 3).

How do I hide the Elementor header on a landing page only?

Cleanest: switch Page Layout to Elementor Canvas in Page Settings — kills header, footer, and sidebar. If you want to keep the footer, use a scoped CSS snippet targeting body.page-id-XXX header. With Elementor Pro, Theme Builder → Header → Display Conditions → Exclude → Specific Page is the best option.

Why does my display:none CSS not hide the Elementor header?

Three usual suspects. (1) Wrong selector — inspect the header in DevTools and copy the actual class or ID. (2) Theme CSS outranks yours — add !important and/or prefix with body for extra specificity. (3) The header is rendered by Elementor Pro Theme Builder; CSS hides it visually but it still loads. Use Theme Builder conditions instead.

Can I hide the header on a whole page group in Elementor?

With Pro: Theme Builder → Header → Display Conditions → Exclude → pick a page group (e.g. WooCommerce products, or all children of a parent page). Without Pro, use body classes: body.woocommerce-shop header, body.parent-pageid-42 header { display: none !important; }. .parent-pageid-42 targets all children of page ID 42.