By default, you can set one header background color in Hostinger Website Builder. If you wish to set different header background colors on different website pages, it can be done with the help of custom code.
The changes made via custom code will be visible in the preview mode and online (not within the editor) 💡
Change the Header Background Color on One Specific Page
Copy the code below:
<script>
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>
Specify the preferred color (e.g., 'green') or its HEX code (e.g., '#008000') here:
let newHeaderColor = '#f00';
Specify the slug* of the page on which you'd like the header to be of that color here:
window.location.pathname === '/contact'
* It's the part of the URL that specifies a particular page on a website, for example:
https://domain.tld/contacthttps://domain.tld/about-usTo change the header background color on the homepage, insert the slash symbol
'/'only
Finally, within the builder, go to your website's Settings → Integrations, and paste the code in the Custom code field. Then, save the changes and update your website.
Change the Header Background Color on Multiple Pages
Copy the code below:
<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>
Specify the preferred color (e.g., 'green') or its HEX code (e.g., '#008000') here:
let newHeaderColor = '#f00';
Specify the slug* of the page on which you'd like the header to be of that color here:
window.location.pathname === '/contact'
* It's the part of the URL that specifies a particular page on a website, for example:
https://domain.tld/contacthttps://domain.tld/about-usTo change the header background color on the homepage, insert the slash symbol
'/'only
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')
Finally, within the builder, go to your website's Settings → Integrations, and paste the code in the Custom code field. Then, save the changes and update your website.
Change the Header Background Color on All Pages Except One
Copy the code below:
<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>
Specify the preferred color (e.g., 'green') or its HEX code (e.g., '#008000') here:
let newHeaderColor = '#f00';
Specify the slug* of the page on which you don't want to set the preferred color here:
window.location.pathname === '/contact'
* It's the part of the URL that specifies a particular page on a website, for example:
https://domain.tld/contacthttps://domain.tld/about-usFor the homepage, insert the slash symbol
'/'only
Finally, within the builder, go to your website's Settings → Integrations, and paste the code in the Custom code field. Then, save the changes and update your website.