The quickest way to hide your header in Beaver Builder
Open the page you want to edit in Beaver Builder and click the Page Settings icon (the gear symbol in the top toolbar). Scroll down to find the Header section and toggle it off. Save your changes. The header disappears from that page only — other pages keep their headers unless you change them individually.
If you want to remove the header from your entire site at once, go to your WordPress dashboard, navigate to Beaver Builder > Settings > Header, and disable it there. This affects every page that uses your default header template.
Some sites use a custom header built inside Beaver Builder itself rather than the built-in header module. If toggling off the header setting does nothing, your header is probably a row you added manually to the page layout. In that case, select the header row and delete it directly, or hide it by clicking the eye icon next to the row in the left panel.
Key Takeaways
- Page Settings (the gear icon) lets you turn off the header for one page without affecting others.
- The Beaver Builder Settings panel in your WordPress dashboard controls the default header for your entire site.
- If the header setting does nothing, your header is probably a custom row you built yourself — delete or hide it from the page layout instead.
- Hiding a header is different from deleting it; hiding keeps the code in place but makes it invisible, while deleting removes it completely.
- You can also use CSS to hide headers on specific pages or devices without removing the code.
Hiding the header on a single page versus your whole site
The method you use depends on whether you want the header gone from one page or everywhere. For a single page, Page Settings is faster and cleaner — you do not have to touch code or rebuild anything. Open the page in the Beaver Builder editor, click the gear icon in the top toolbar, find the Header toggle under the Page section, and turn it off.
If you want to remove the header from every page at once, use the global settings instead. In your WordPress dashboard, go to Beaver Builder > Settings > Header and disable it there. This is useful if you are redesigning your site and want to build a new header from scratch, or if you are using Beaver Builder only for specific pages and do not want a header on the rest of your site.
Keep in mind that disabling the header in global settings does not delete your header — it just hides it. If you change your mind, you can turn it back on and your header reappears exactly as it was. The same is true for page-level settings.
When your header does not disappear after toggling the setting
If you turn off the header setting and nothing happens, your header is probably not the built-in Beaver Builder header. Instead, you likely built it as a custom row at the top of your page layout. The header toggle only controls Beaver Builder's native header module, not rows you added manually.
To remove a custom header row, open the page in Beaver Builder and look at the left panel where your rows are listed. Find the row at the top that contains your logo, navigation, or other header content. Click on it to select it, then either click the trash icon to delete it or click the eye icon to hide it temporarily. If you want to keep the row but just make it invisible, the eye icon is the safer choice — you can always unhide it later.
Another reason the toggle might not work is if your theme has its own header that runs separately from Beaver Builder. In that case, you need to disable the header in your theme settings, not in Beaver Builder. Check your WordPress dashboard under Appearance > Customize or look for a theme options panel specific to your theme.
Using CSS to hide headers on specific pages or devices
If you want more control — for example, hiding the header only on mobile devices or only on certain pages — CSS is the way to do it. You do not need to know how to code; you can paste a simple rule into Beaver Builder's custom CSS field.
To hide the header on mobile only, open Page Settings, scroll to the CSS section, and paste this code: @media (max-width: 768px) { .fl-page-header { display: none; } }. This hides the header on screens smaller than 768 pixels wide (most phones and tablets) but keeps it visible on desktop.
To hide the header on a specific page using a page ID, use: .page-id-123 .fl-page-header { display: none; } (replace 123 with your actual page ID, which you can find in the page URL when editing). This method is useful if you want a landing page or checkout page without a header while keeping headers on the rest of your site.
The difference between hiding and deleting your header
Hiding your header keeps the code in place but makes it invisible to visitors. Deleting your header removes the code entirely. For most situations, hiding is the safer choice because you can always unhide it later if you change your mind — there is no undo button once you delete.
Use the toggle or eye icon to hide. Use the trash icon or the delete option only if you are certain you do not want the header back. If you are experimenting with your site design, hiding is always the better first step.
If you deleted your header by accident and need it back, you can undo the action immediately by pressing Ctrl+Z (or Cmd+Z on Mac) while still in the Beaver Builder editor. If you have already left the editor, your header is gone and you will need to rebuild it or restore from a backup.
Rebuilding your header after removing it
If you removed your header and now want to add a new one, you have two options: use Beaver Builder's built-in header module or build a custom header row.
To use the built-in header, go to Page Settings, find the Header section, and toggle it back on. Then go to Beaver Builder > Settings > Header in your WordPress dashboard to customize it — add your logo, set up navigation, choose colors and fonts. This header will appear on every page that has the header toggle turned on.
To build a custom header, add a new row at the top of your page layout and fill it with modules for your logo, menu, and other header elements. This gives you complete control over the design but requires you to build it on each page or save it as a template to reuse. Custom headers are useful if you want a different look on different pages.
Frequently Asked Questions
Will disabling the header affect my navigation menu?
Not necessarily. If your navigation menu is part of the built-in header, it disappears when you turn off the header. If you built your menu as a separate module in a custom row, it stays visible. Check where your menu lives before disabling the header — you may need to rebuild it elsewhere if you want visitors to navigate your site.
Can I hide the header on just the homepage?
Yes. Open your homepage in Beaver Builder, go to Page Settings, and toggle off the header. Other pages keep their headers. If you want to hide it on all pages except the homepage, disable it globally in Beaver Builder Settings, then turn it back on for each individual page.
Does hiding the header improve my site speed?
Hiding the header with CSS or the toggle does not improve speed because the code still loads — it just does not display. Deleting the header removes the code entirely and may save a tiny amount of load time, but the difference is usually too small to notice. Hide or delete based on design needs, not performance.
What if my header is controlled by my WordPress theme, not Beaver Builder?
Check your theme settings first. Go to Appearance > Customize in your WordPress dashboard and look for header or layout options. Many themes have their own header controls separate from Beaver Builder. If you find the header there, disable it in your theme settings instead of Beaver Builder.
Can I have different headers on different pages?
Yes. Build a custom header row on each page and design it differently, or use Beaver Builder's header template system to create multiple header variations and assign them to different pages. Page Settings also lets you turn the header on for some pages and off for others, giving you flexibility in which pages display a header at all.