[Tutorials] Hide header and footer for a specific page

Ẩn header và footer cho một trang cụ thể mà bạn muốn-ket-qua

[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.

Hide header and footer for a specific page you want
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!

Hide header and footer for a specific page
Hide header and footer for a specific page

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!

Trả lời

Email của bạn sẽ không được hiển thị công khai.