By default, you can set only one header background color in Hostinger Website Builder.

If you want to use different header background colors on different pages, you can do so using custom code.

💡 Changes made via custom code will be visible in preview mode and online, but not within the editor.

Steps

Copy the code below for your desired setup into a plain text editor: one specific page, multiple pages, or all pages except one.
Customize the code:
1. Replace '#f00' with your preferred color name (e.g., 'green') or HEX code (e.g., '#008000').
2. Replace the page path (e.g., '/contact') with the slug of the page you want to target.
In the Website Builder, go to Settings → Integrations.
Paste the code into the Custom code field and save your changes.
Update your website to apply the changes.

What is a slug?

A slug is the part of a URL that identifies a specific page on your website. For example:

https://domain.tld/contact → /contact
https://domain.tld/about-us → /about-us
To target the homepage, use / only.

Change the header background color on one specific Page

Copy the code below and customize it:

let newHeaderColor = ‘#f00’;

setInterval(() => {

if (document.querySelector(‘.background’)) {

if (window.location.pathname === ‘/contact’) {

document.querySelector(‘.background’).style.backgroundColor = newHeaderColor;

document.querySelectorAll(‘.block-header-item__dropdown’).forEach(dropdown => {

dropdown.style.backgroundColor = newHeaderColor;

})

}

else {

document.querySelector(‘.background’).style.backgroundColor = ”;

document.querySelectorAll(‘.block-header-item__dropdown’).forEach(dropdown => {

dropdown.style.backgroundColor = ”;

})

}

});

</script>

Change the header background color on multiple pages

Copy the code below and customize it:

<script>
    let newHeaderColor = '#f00';
    setInterval(() => {
        if (document.querySelector('.background')) {
            if (window.location.pathname === '/' || window.location.pathname === '/contact') {                document.querySelector('.background').style.backgroundColor = newHeaderColor;
                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {
                    dropdown.style.backgroundColor = newHeaderColor;
                })
            }
            else {                document.querySelector('.background').style.backgroundColor = '';
                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {
                    dropdown.style.backgroundColor = '';
                })
            }
        }
    });
</script>

To change the header color on more pages, copy this part:

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

Change the slug (/contact) and add it to the end of the statement, for instance:

if (window.location.pathname === '/contact' || window.location.pathname === '/about-us' || window.location.pathname === '/blog')

Change the header background color on all pages except one

Copy the code below and customize it:

<script>
    let newHeaderColor = '#f00';
    setInterval(() => {
        if (document.querySelector('.background')) {
            if (window.location.pathname !== '/') {                document.querySelector('.background').style.backgroundColor = newHeaderColor;
                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {
                    dropdown.style.backgroundColor = newHeaderColor;
                })
            }
            else {                document.querySelector('.background').style.backgroundColor = '';
                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {
                    dropdown.style.backgroundColor = '';
                })
            }
        }
    });
</script>