by Table of Contents
How to Remove/hide header & Footer from specific Page in wordpress? Using CSS.
At some pages the header of blog or footer doesn’t suits the design, as well as its not required as it may deflect user from main content in that case , So many bloggers want to remove header or hide header from their wordpress blog so here is tutorial to hide/remove header & footer from wordpress website using CSS code. This method works with Desktop as well as mobile view & there is no plugin required at all.
Must Read – How to create a blog to make money?Make money blogging.
How to Remove header & Footer from single Page in wordpress?
Copy below CSS code.
.page-id-2171 .site-header, .page-id-2171 .site-footer { display: none; }
In this tutorial we are going to learn how to remove header & footer from single page on wordpress?, To do it you just need to add CSS code in design Customization (additional CSS) option. Suitable for desktop as well as mobile view.
-
Find Page id and Note.
Go to Pages > Then note/remember page id as shown in above image.
-
Then Go to Design > Customize > Additional CSS.
Go to design > Customize > Additional CSS > and Paste CSS i given at start of the post and Replace Page id with your blogs page id for which you want to hide or disable header. > Then Save.
for example – As in given CSS we have to replace 2171 with 2083.
Done ! we have successfully hidden/removed blog header from specific page of wordpress.
Now visit the page, You can see there is no more header and footer. for Example see below pages one with header and one without header.
With header – https://bloggerguest.com/contact/
Without Header – https://bloggerguest.com/online-currency-converter-calculator-usd-dollars/
Also Read – How to create online store in Blogger free?
Brilliant! I was having trouble with this. I got the same code from somewhere else but had a # before header and footer. I deleted the # and was gonna add the full-stop as you suggested but it already did the trick.
Thank you!!!
Great on point tutorial. I used only the css to hide the footer, and it worked just fine. Thank you very much.