How to Hide the Header Section in Hostinger Website Builder

Hey everyone, welcome to B Experience! In this blog post, I will guide you through the steps to hide the header section in Hostinger website builder. This feature can be useful when you want a cleaner look for certain pages on your website.

Step-by-Step Guide to Hiding the Header Section:

1. Access Your Website Builder:
   • Start by logging into your Hostinger website builder.
   • Navigate to your website settings by clicking on “Website Settings.”
2. Find the Integrations Section:
   • Once you are in the website settings, click on “Integrations.”
3. Prepare Your Page Slug:
   • Before copying the code, you need to find and edit your page slug.
   • Go to “Pages and Navigation,” look for the page you want to hide the header on, and click on the little circle next to it.
   • Select “Page URL” to find your exact page slug. For example, if your contact page slug is “contact,” make sure to note it down.
4. Copy the Custom Code:
   • Now, you need to copy a simple piece of custom code provided below

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

1. Replace “page-slug” with your actual page slug (e.g., “contact”).
2. Insert the Code:
   • Go back to the Integrations section and paste the code under “Custom Code.”
   • Click on “Save Changes” to apply the changes.
3. Update and Publish:
   • Don’t forget to update your website for the changes to take effect.
   • Refresh the specific page to see the header section hidden.

Hiding the Header Section on Multiple Pages:

• If you want to hide the header section on multiple pages, you can add more page slugs to the code.
• For example, if you also want to hide the header on a “checklist” page, update your code to include both slugs:

|| window.location.pathname === '/faq'

Conclusion:

That’s it! You have successfully hidden the header section on your selected pages in the Hostinger website builder. This method helps you create a cleaner look for specific pages, enhancing the user experience.

Before you go, I have something special for you. I’m offering two free online video courses. The first course is about Hostinger hosting and WordPress management, and the second one is on using the Hostinger website builder to create basic websites or online shops. You can get them both for free by clicking the link below:

👉 Hostinger Free Courses

If you found this guide helpful, give it a thumbs up and subscribe to my YouTube channel for more tips and tutorials. If you have any questions, feel free to leave a comment below.