September 23, 2023

How to Remove header & Footer from single Page in wordpress?

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 from single page in wordpress using CSS code?
How to remove header from single page in wordpress using CSS code?

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; }
how to hide/disable header from specific page on wordpress?

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.

  1. Find Page id and Note.

    how to hide header & footer from pages of wordpress?

    Go to Pages > Then note/remember page id as shown in above image.

  2. Then Go to Design > Customize > Additional CSS.

    how to remove header and footer from specific pages?

    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 headerhttps://bloggerguest.com/contact/

Without Headerhttps://bloggerguest.com/online-currency-converter-calculator-usd-dollars/

Also Read – How to create online store in Blogger free?

ketanblogger

I am a welding expert completed diploma in mechanical engineering, Blogging as a hobby, I love to help fellow bloggers to solve their issues and help them monetize their websites. I teach people how to earn money online.

View all posts by ketanblogger →

2 thoughts on “How to Remove header & Footer from single Page in wordpress?

  1. 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!!!

Comments are most welcome and appreciated.