How to Disable the Header in Beaver Builder

Beaver Builder gives you serious control over your WordPress page layouts — but the header is one of those elements that doesn't always play by the same rules as everything else on the page. If you're trying to remove or hide the header on a specific page (or across your entire site), the method you'll use depends on a few key factors: your active theme, whether you're using Beaver Themer, and how your header was built in the first place.

Why the Header Is Separate From the Page Builder

When you edit a page in Beaver Builder, you're working inside the content area — the region between the header and footer. The header itself is typically controlled by your WordPress theme, not by Beaver Builder directly.

This is an important distinction. Beaver Builder (the page builder plugin) and Beaver Themer (a separate add-on) serve different functions:

• Beaver Builder edits the content area of individual pages and posts.
• Beaver Themer lets you build and override theme-level elements like headers, footers, and archive layouts.

So if you want to disable or replace the header, you're usually working outside of the standard Beaver Builder interface — unless you have Beaver Themer installed.

Method 1: Use Your Theme's Built-In Header Settings

The simplest path for most users is through the theme itself. Many themes — including Beaver Builder Theme (the companion theme) and popular third-party themes — include native options to hide the header on a per-page basis.

If You're Using the Beaver Builder Theme

1. Open the page in WordPress and scroll down to the Page Attributes or look for a Beaver Builder meta box below the editor.
2. Look for settings labeled Header, Footer, or Full Width. The Beaver Builder Theme includes a Page Settings section that lets you disable the header, footer, or both on individual pages.
3. Set the header to None or Hidden, then save the page.

This is the fastest method and requires no code or extra plugins. ✅

If You're Using a Third-Party Theme

The location of these settings varies. Common places to check:

• Page Settings (below the editor block or in the Classic Editor sidebar)
• Elementor / Divi / Astra / GeneratePress style page options — many themes inject their own per-page controls
• The theme's Customizer panel under Appearance → Customize

If your theme doesn't offer a native header toggle, you'll need to use one of the methods below.

Method 2: Disable the Header With Custom CSS

If your theme doesn't include a built-in toggle, you can hide the header visually using CSS. This doesn't remove it from the HTML, but it removes it from view entirely.

Add this to Appearance → Customize → Additional CSS:

header, .site-header, #masthead { display: none; } 

The exact selector depends on your theme. Most themes use .site-header, #masthead, or header as the wrapper class or ID. You can find the right one by right-clicking the header in your browser and selecting Inspect Element.

⚠️ This approach hides the header globally across your entire site unless you use conditional logic or page-specific CSS plugins.

Method 3: Use Beaver Themer to Replace the Header

If you have Beaver Themer installed, you can build a completely custom header layout and apply it conditionally — or suppress the default header entirely by creating a blank header template.

Here's the general workflow:

1. Go to Beaver Builder → Themer Layouts in your WordPress dashboard.
2. Create a new layout and set the Type to Header.
3. Set the Location rules — you can target specific pages, post types, or the entire site.
4. Build your custom header (or leave the layout blank to effectively output nothing where the header would be).
5. Publish the layout.

This is the most flexible method and is well-suited for landing pages, sales pages, or situations where you need precise control over different header states across your site.

Method 4: Template-Level Control for Landing Pages 🎯

A common reason to disable the header is to create a distraction-free landing page. Beaver Builder supports this through its full-width page templates.

When creating or editing a page:

1. In the Page Attributes section (Classic Editor) or document settings (Block Editor), look for the Template dropdown.
2. Select a template like Beaver Builder — No Header/Footer or Full Width — the names vary by theme.
3. This removes both the header and footer, leaving only the Beaver Builder content area.

Not all themes offer this template option, but the official Beaver Builder Theme and many popular themes do.

Key Variables That Affect Which Method Works for You

What "Disabling" Actually Means Matters

There's a meaningful difference between:

• Hiding the header (CSS display: none) — it's still in the HTML and loaded by the browser
• Removing it from output (theme template or Themer) — it's not rendered at all
• Replacing it (Themer) — a custom layout overrides the default

For performance-sensitive pages or SEO purposes, truly removing the header from output is preferable to hiding it with CSS. For quick visual fixes or testing, CSS is the faster option.

The right approach depends heavily on what your theme supports out of the box, whether you have Beaver Themer available, and whether you need the change to apply to one page or your entire site — all factors that vary from one WordPress installation to the next.