Can I remove the header and footer from specific pages?

Store Design
1

Hello every body!!!

When I create a new page always appears the header and footer information, but sometimes, I would like to remove them, I mean, the only content of the Body window is the one desired.

Is it possible to remove the header and footer in any specific page?

Thanl you in advance for any help

best regards

tony

2

@tonyvaloz

Yes, this is possible to use CSS code but your page must have some unique ID or class to mention.

3

Thank you for your response!

Any steps or link to read please?

hava a nice day!

4

just use inspect elements to find footer and header class when you find classes then you can simply use a code in your page editor

Example:
5

@tonyvaloz

Please provide your website URL. I will check and provide you code accordingly.

6

Hello friend!

Thank you again for your response…

Sure !!!

website:
www.menumovil.me

Of course, every menu item is linked to every collection. Therefore all pages contains the header and footer, so I would like a specific page without the header and footer, for example:

How could I remove the header and footer only for the following URL address:
https://menumovil.me/collections/cafes (Collection: cafe)

or this one?
https://menumovil.me/collections/cafes/products/cafe (Product: small cafe)

I will appreciate any information!!!
best regards

tony

7

@tonyvaloz

Thanks for the URLs and clarification. I got want I want in your website that is the unique id of the body where you can identify the page. Please check screenshot below.

For collection page “Cafes”

![body-id-collection-page.jpg|1183x458](upload://gDHfnXFRBUM9tQhPOHXUh559vUZ.jpeg)

If you check the above body ID. On that basis, you have to write CSS code like below to hide the header and footer.

/* for cafes page */
body#cafes .site-header, body#cafes .site-footer {
    display: none;
}

Same for “cafe-marron” product page

![body-id-for-product-page.jpg|1342x417](upload://9XMGpizjUeG0b96vGusUiQsCgZg.jpeg) 
/* For cafe-marron product page */
body#cafe-marron .site-header, body#cafe-marron .site-footer {
display: none;
}

Just you have to check the body id using inspect element and write code in your CSS file in the future.

Hope this works.

Thanks!

8

Excellent solution my friend!!!

This is what I was looking for.

I want also to thank all the members who helped with my question.

have a nice day