How to Hide the Header on Specific Pages in WordPress
WordPress’s credo is that anyone can make a website, and it does hold true. But that doesn’t mean that anyone can achieve whatever they want with ease. There are some options which are not present in WordPress’s functionalities or themes by default, or that are difficult to find. Hiding a page’s header is often one of those.
In this tutorial, we will be showing you how to hide a header in WordPress. There are several ways to do that, and we will do our best to cover all of them. Some of the solutions are going to be theme- or page builder-specific, while some are more general, so feel free to scroll right down to the section you need.
Here’s what we’ll be talking about:
Qode Themes: Top Picks
View Collection
If you want to hide the header for any page on your website, the first thing you should be doing is checking whether your theme has an in-built option to hide the header for each page. We will be showing you how that works for our free Qi Theme using the Gutenberg page editor, but the option may appear in different places in different themes.
To start, we will create a page as we would with any other page, give it a title, and populate it with some randomly generated lorem ipsum text, but that doesn’t matter a great deal.
Many themes have a command or an option which simply hides the header for a page. Ours doesn’t, but there is a workaround: the landing page template. Landing pages typically do not contain headers, and, if your theme comes with a landing page template, it is most likely that it is a headerless page template.
For the purposes of our demonstration, we will change the page’s layout to Qi Landing by selecting it from the Template menu and clicking Publish. The control we want is in the menu on the right hand-side.
On any website, a landing page typically does not contain a header, which is why the Qi Landing page layout does not use a header, either. If you are not using the Qi Theme, chances are there is a layout which contains the word “landing” and does not contain a header. Here’s what our (very minimal) page looks like:
Of course, this kind of layout might not work for you. No worries: your theme might use a very different layout, and, even if it is very similar, you can use CSS to remove the header alone.
If you are using the Elementor page editor, you can still use the same workaround as described above. Elementor keeps the settings you want in the page settings tabs, though there may be themes which work differently with Elementor. To access the page layout controls, click the gear icon in the lower right hand-side corner of the screen, and find the Settings tab of the Page Settings menu.
From the Page Layout menu in the General Settings section of the tab, select the Qi Landing layout. As we have mentioned in the previous section, if you are not using our Qi Theme, you may have a different name for a layout without a header. There is a good chance, though, that a landing page layout will not contain a header.
Our Elementor preview looks much the same as our Gutenberg preview page:
Depending on the screen width, you will get this exact result.
Irrespective of the theme or page editor you are using, there is a way to use WordPress’s in-built capabilities to hide a header on a page, and that means using the WordPress Theme Customizer.
However, before you start adding code to your website, there are a few things you need to consider. Firstly, adding CSS directly to your website is risky, as it may break your website and make it difficult for a new user to restore it. This is why we recommend making a backup of your website and using a child theme instead of making modifications to your website code directly.
You also need to know the ID of the page you wish to hide the header of. To do that, you need to make use of your browser’s inspect tool.
While viewing your page in your browser, activate your Inspect tool (F12 for PC users, Command + Option + I for Mac users), and locate the <body tag. In it, you will find the page-id section. For us, the page ID is 2536, but for you, it will most likely be different.
In order to remove the header and footer from a page you know the ID of, navigate to Appearance/Customize from your WordPress dashboard.
Once you have accessed the customizer, find the Additional CSS section and paste the following code into it:
.page-id-2536 header, .page-id-2536 footer
{
display: none !important;
}
Of course, you will need to replace 2536 with the page ID you wish to hide the header to.
And this is what our headerless page looks like now, after using CSS to eliminate the unnecessary element:
In Conclusion
As you can see, there are ways to hide the header of a page if you don‘t want it. Whether or not you are using our very own Qi Theme (and we can see no reason why you wouldn‘t want to) or not, and whether you are using Elementor, Gutenberg or CSS, hiding a header isn‘t very difficult and, with our instructions, you can do it with ease and within minutes. Just as a reminder: check out your theme‘s functionalities before resorting to CSS, as there is a good chance you already have the functionality you want built into your theme.
