All Collections
Website Builder
Pages and Navigation
Website Builder: How to Hide the Header Section From Specific Pages
Website Builder: How to Hide the Header Section From Specific Pages

Learn how to hide the header section from particular website pages in Hostinger Website Builder

Updated over a week ago

If you use Hostinger Website Builder and want to hide the menu section from some particular pages, check the information below 👇

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

The header section in Hostinger Website Builder

By default, the header section is visible on all your website pages. To hide the header section from a particular page, follow these steps:

  1. Copy the code below

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

Code

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

Customize 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?