{"id":36565,"date":"2022-04-11T15:00:39","date_gmt":"2022-04-11T13:00:39","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=36565"},"modified":"2022-04-08T10:58:31","modified_gmt":"2022-04-08T08:58:31","slug":"how-to-hide-header-on-specific-pages-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-hide-header-on-specific-pages-in-wordpress\/","title":{"rendered":"How to Hide the Header on Specific Pages in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress\u2019s credo is that anyone can make a website, and it does hold true. But that doesn\u2019t mean that anyone can achieve whatever they want with ease. There are some options which are not present in WordPress\u2019s functionalities or themes by default, or that are difficult to find. Hiding a page\u2019s header is often one of those.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we\u2019ll be talking about:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#hide-header-using-gutenberg\">How to Use Theme Settings to Hide the Header Using Gutenberg<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#hide-header-using-elementor\">How to Use Theme Settings to Hide the Header Using Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#hide-header-using-css\">How to Use CSS to Hide the Header<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"hide-header-using-gutenberg\"><\/a>How to Use Theme Settings to Hide the Header Using Gutenberg<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you want to hide the header for any page on your website, the first thing you should be doing is <strong>checking whether your theme has an in-built option to hide the header<\/strong> for each page. We will be showing you how that works for our free <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\" target=\"_blank\" rel=\"noopener\">Qi Theme<\/a> using the Gutenberg page editor, but the option may appear in different places in different themes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/lorem-ipsum\/\">lorem ipsum text<\/a>, but that doesn\u2019t matter a great deal.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Many themes have a command or an option which simply hides the header for a page. Ours doesn\u2019t, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the purposes of our demonstration, we will change the page\u2019s layout to <em>Qi Landing<\/em> by selecting it from the <strong>Template<\/strong> menu and clicking <strong>Publish<\/strong>. The control we want is in the menu on the right hand-side.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"606\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Page-Template.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Page Template\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Page-Template.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Page-Template-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Page-Template-768x480.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Gutenberg-Page-Template-620x388.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On any website, a landing page typically does not contain a header, which is why the <em>Qi Landing<\/em> 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 \u201clanding\u201d and does not contain a header. Here\u2019s what our (very minimal) page looks like:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"478\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Page-Template-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Page Template Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Page-Template-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Page-Template-Preview-300x148.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Page-Template-Preview-768x379.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Page-Template-Preview-620x306.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 <a href=\"#hide-header-using-css\">use CSS to remove the header<\/a> alone.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"hide-header-using-elementor\"><\/a>How to Use Theme Settings to Hide the Header Using Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]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 <strong>gear<\/strong> icon in the lower right hand-side corner of the screen, and find the <strong>Settings<\/strong> tab of the <strong>Page Settings<\/strong> menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"617\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-settings.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Page Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-settings-300x191.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-settings-768x489.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-settings-620x395.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From the <strong>Page Layout<\/strong> menu in the <strong>General Settings<\/strong> section of the tab, select the<em> Qi Landing<\/em> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"621\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-Layout.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Page Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-Layout-300x192.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-Layout-768x492.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-Layout-620x397.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Our Elementor preview looks much the same as our Gutenberg preview page:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-Layout-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Page Layout Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-Layout-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-Layout-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-Layout-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Page-Layout-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Depending on the screen width, you will get this exact result.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"hide-header-using-css\"><\/a>How to Use CSS to Hide the Header<\/h2>\n<p>[\/vc_column_text][vc_column_text]Irrespective of the theme or page editor you are using, there is a way to use WordPress\u2019s in-built capabilities to hide a header on a page, and that means using the <a href=\"https:\/\/qodeinteractive.com\/magazine\/ultimate-guide-to-wordpress-theme-customizer\/\">WordPress Theme Customizer<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-backup-with-updraftplus-plugin\/\">backup of your website<\/a> and <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-child-theme-wordpress\/\">using a child theme<\/a> instead of making modifications to your website code directly.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You also need to know the ID of the page you wish to hide the header of. To do that, you need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/browser-inspect-element-tool-in-wordpress\/\">make use of your browser&#8217;s inspect tool<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While viewing your page in your browser, activate your Inspect tool (F12 for PC users, Command + Option + I for Mac users), and locate the <em>&lt;body<\/em> tag. In it, you will find the <em>page-id<\/em> section. For us, the page ID is <em>2536<\/em>, but for you, it will most likely be different.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Inspect-Body.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Inspect Body\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Inspect-Body.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Inspect-Body-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Inspect-Body-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Elementor-Inspect-Body-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to remove the header and footer from a page you know the ID of, navigate to <strong>Appearance\/Customize<\/strong> from your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Appearance-Customize.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Appearance-Customize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Appearance-Customize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Appearance-Customize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Appearance-Customize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you have accessed the customizer, find the <strong>Additional CSS<\/strong> section and paste the following code into it:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.page-id-2536 header, .page-id-2536 footer\r\n{\r\ndisplay: none !important;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, you will need to replace 2536 with the page ID you wish to hide the header to.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-Code.jpg\" class=\"attachment-full size-full\" alt=\"Add Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-Code-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-Code-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Add-Code-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And this is what our headerless page looks like now, after using CSS to eliminate the unnecessary element:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"485\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Headerless-Page-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Headerless Page Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Headerless-Page-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Headerless-Page-Preview-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Headerless-Page-Preview-768x384.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Headerless-Page-Preview-620x310.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, there are ways to hide the header of a page if you don\u2018t want it. Whether or not you are using our very own Qi Theme (and we can see no reason why you wouldn\u2018t want to) or not, and whether you are using Elementor, Gutenberg or CSS, hiding a header isn\u2018t very difficult and, with our instructions, you can do it with ease and within minutes. Just as a reminder: check out your theme\u2018s functionalities before resorting to CSS, as there is a good chance you already have the functionality you want built into your theme.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking for a way to hide a header on your WordPress website? We will show you how it&#8217;s done.<\/p>\n","protected":false},"author":16990,"featured_media":36583,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[243,4,13],"class_list":["post-36565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-header","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/36565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=36565"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/36565\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/36583"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=36565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=36565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=36565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}