{"id":624,"date":"2023-09-08T09:11:00","date_gmt":"2023-09-08T09:11:00","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2023\/09\/08\/8347670-hostinger-website-builder-how-to-change-the-header-section-color-on-specific-pages\/"},"modified":"2026-03-16T12:12:02","modified_gmt":"2026-03-16T12:12:02","slug":"8347670-hostinger-website-builder-how-to-change-the-header-section-color-on-specific-pages","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/8347670-hostinger-website-builder-how-to-change-the-header-section-color-on-specific-pages\/","title":{"rendered":"Hostinger Website Builder: How to change the header section color on specific pages"},"content":{"rendered":"

By default, you can set only one header background color<\/a> in Hostinger Website Builder. However, it is possible to keep the header transparent, which will make it take the same color as the first section of each page.<\/p>

This can be done by clicking Edit header<\/strong>:<\/p>

\"\"<\/p>

Then, open the tab Style<\/strong>, and toggle on Transparent header<\/strong>. In this specific case, this would make the header purple, taking the color of the narrow section about free shipping:<\/p>

\"\"<\/p>

Alternatively, if you want to use different header background colors on different pages, you can do so using custom code<\/a>.<\/p>

\n

💡 Changes made via custom code will be visible in preview mode and online, but not within the editor.<\/p>\n<\/div>

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

       <\/p>

      What is a slug?<\/strong><\/p>

      A slug is the part of a URL that identifies a specific page on your website. For example:<\/p>

        \n
      • \n

        https:\/\/domain.tld\/contact<\/code> → \/contact<\/code><\/p>\n<\/li>\n

      • \n

        https:\/\/domain.tld\/about-us<\/code> → \/about-us<\/code>
        To target the homepage, use \/<\/code> only.<\/p>\n<\/li>\n<\/ul>

         <\/p>

        Change the header background color on one specific Page<\/h3>

        Copy the code below and customize it:<\/p>

        \n

        <script><\/p>\n

        let newHeaderColor = ‘#f00’;<\/p>\n

        setInterval(() => {<\/p>\n

        if (document.querySelector(‘.background’)) {<\/p>\n

        if (window.location.pathname === ‘\/contact’) {<\/p>\n

        document.querySelector(‘.background’).style.backgroundColor = newHeaderColor;<\/p>\n

        document.querySelectorAll(‘.block-header-item__dropdown’).forEach(dropdown => {<\/p>\n

        dropdown.style.backgroundColor = newHeaderColor;<\/p>\n

        })<\/p>\n

        }<\/p>\n

        else {<\/p>\n

        document.querySelector(‘.background’).style.backgroundColor = ”;<\/p>\n

        document.querySelectorAll(‘.block-header-item__dropdown’).forEach(dropdown => {<\/p>\n

        dropdown.style.backgroundColor = ”;<\/p>\n

        })<\/p>\n

        }<\/p>\n

        }<\/p>\n

        });<\/p>\n

        <\/script><\/p>\n<\/div>

        Change the header background color on multiple pages<\/h3>

        Copy the code below and customize it:<\/p>

        <script>\r\n    let newHeaderColor = '#f00';\r\n    setInterval(() => {\r\n        if (document.querySelector('.background')) {\r\n            if (window.location.pathname === '\/' || window.location.pathname === '\/contact') {                document.querySelector('.background').style.backgroundColor = newHeaderColor;\r\n                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {\r\n                    dropdown.style.backgroundColor = newHeaderColor;\r\n                })\r\n            }\r\n            else {                document.querySelector('.background').style.backgroundColor = '';\r\n                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {\r\n                    dropdown.style.backgroundColor = '';\r\n                })\r\n            }\r\n        }\r\n    });\r\n<\/script><\/code><\/pre>
          \n
        • To change the header color on more pages, copy this part:<\/li>\n<\/ul>
          || window.location.pathname === '\/contact'<\/code><\/pre>
            \n
          • Change the slug (\/contact<\/code>) and add it to the end of the statement, for instance:<\/li>\n<\/ul>
            if (window.location.pathname === '\/contact' || window.location.pathname === '\/about-us' || window.location.pathname === '\/blog')\r\n<\/code><\/pre>
             <\/p>
            Change the header background color on all pages except one<\/h3>
            Copy the code below and customize it:<\/p>
            <script>\r\n    let newHeaderColor = '#f00';\r\n    setInterval(() => {\r\n        if (document.querySelector('.background')) {\r\n            if (window.location.pathname !== '\/') {                document.querySelector('.background').style.backgroundColor = newHeaderColor;\r\n                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {\r\n                    dropdown.style.backgroundColor = newHeaderColor;\r\n                })\r\n            }\r\n            else {                document.querySelector('.background').style.backgroundColor = '';\r\n                document.querySelectorAll('.block-header-item__dropdown').forEach(dropdown => {\r\n                    dropdown.style.backgroundColor = '';\r\n                })\r\n            }\r\n        }\r\n    });\r\n<\/script><\/code><\/pre>
            \n<\/p>\n","protected":false},"excerpt":{"rendered":"
            By default, you can set only one header background color in Hostinger Website Builder. However, it is possible to keep the header transparent, which will…<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[281],"tags":[],"class_list":["post-624","post","type-post","status-publish","format-standard","hentry","category-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/8347670-hostinger-website-builder-how-to-change-the-header-section-color-on-specific-pages\/","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=624"}],"version-history":[{"count":3,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/624\/revisions"}],"predecessor-version":[{"id":8601,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/624\/revisions\/8601"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}