[Tutorials] Hide header and footer for a specific page
There are many people who want to hide the header and footer for a specific page, such as the checkout page. When the user reaches the checkout step, you don’t want to show the header or footer to navigate the user to a certain page other than to stay and fill in the information.
To solve this problem you can choose a plugin but most people choose to use CSS because it is fast and simple and does not burden the web. However, many of you probably still don’t know how to use CSS to hide. Many people just take the header and footer classes and display:none ^^. So hide all headers and footers for pages!
Today, flatsomea-z will show you how to hide header and footer for a specific page you want.
Step 1: Identify the page to hide the header and footer
Go to the page where you want to hide the header or footer > press F12 or Ctrl + Shift + I or Right click and select inspect element. Then drag to the top of the opening <body tag as shown above and check what its page id is.
For example, in the picture, the red circled page-id-69 is the key we need to find.
Step 2: Customize CSS
Go to Appearance > Customization > Custom css > Add CSS and the following code page
If you want to hide the header:
.page-id-69 header {
display:none !important;
}
If you want to hide the footer:
.page-id-69 footer {
display:none !important;
}
In case you want to hide both header and footer:
.page-id-69 header, .page-id-69 footer {
display:none !important;
}
Save and done. Go back to the page to hide, clear the cache and see the results!
If you want to hide another item that is not header or footer, just follow the following syntax:
.page-id .tên class{
display:none!important
}
Find the class you want to hide and replace it!