All Collections
Website editor
Pages and navigation
How to Hide the Header Section from Specific Pages
How to Hide the Header Section from Specific Pages

Learn how to hide the header section from particular website pages

Updated over a week ago

The header section is the topmost section of a website that contains your website's menu:

By default, the header section is visible on all your website pages.

To hide the header section from a particular page:

  1. Copy the code below

  2. Paste the customized code into the Custom code field in your website's integrations settings

The code

<script>
setInterval(() => {
if (window.location.pathname === '/page-title') {
document.querySelector('header').style.display = "none";
}
else {
document.querySelector('header').style.display = "grid";
}
}, 50);
</script>

Customizing the code

To specify the page to hide the header from, replace page-title with the slug of your page here:

if (window.location.pathname === '/page-title')

For example, if you want to hide the header section from your About page, the URL of which is https://domain.tld/about, the code would look like this:

if (window.location.pathname === '/about')


If you'd like to disable the header on multiple pages, edit the line this way:

if (window.location.pathname === '/about' || window.location.pathname === '/contacts' || window.location.pathname === '/faq')

In other words, if you need to disable the header on multiple pages, use || symbols, copy the phrase window.location.pathname === '/about' and specify the slugs of your pages.

Did this answer your question?