Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11In Hostinger AI Builder’s manual mode, you can make a header blend into each page’s first section by enabling Transparent header. To assign chosen solid colors to only certain pages, use custom code that checks each page’s URL path, then save and publish the site. Hostinger says the code change appears in preview and on the live site, but not in the editor.
Choose the approach that matches your goal
| Approach | What it does | Best for |
|---|---|---|
| Transparent header | Uses the background of the first section beneath the header, so the apparent header color can differ from page to page. | A header that should blend into each page’s opening section. |
| Custom code | Sets a chosen header background color when the current page path matches a path you specify. Hostinger’s example also changes header dropdown backgrounds. | Giving selected pages their own solid header color. |
Hostinger says manual mode has one default header background color; there is no built-in setting for assigning a separate solid header color to each page. See Hostinger’s instructions for page-specific header colors in manual mode.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Siti web produttivi con Hostinger: Il Complemento Operativo al Manuale AI Investment: Digital... | $9.99 | Buy on Amazon |
Make the header follow each page’s first section
- In the editor, click the header and select Edit header.
- Open Style.
- Enable Transparent header.
With transparency enabled, the header takes the color of the first section below it. This follows that section’s background; it does not assign a separate, fixed header color based on the page URL.
Set solid colors on selected pages with custom code
Use Hostinger’s custom-code method when you want particular pages to have solid header colors. The general approach is to compare window.location.pathname with the page paths you want to target and set the header background accordingly. The homepage path is /; a page whose URL ends in /contact may use /contact as its path.
Free tools Windows power users keep installed
One-click scans. No signup required.
Add the code in Hostinger
- Open the site builder’s more menu and choose Integrations. Hostinger also labels this route Settings → Integrations in a related article.
- Paste your adapted code into Custom code and save it.
- Publish or update the website to apply the change.
- Check the result in preview mode and on the published site.
Hostinger’s example uses the .background selector for the header and also updates .block-header-item__dropdown, so the dropdown backgrounds change along with the header. It resets those background styles on paths that are not targeted.
Adapt the page-path conditions
For selected pages, add a path comparison for each page and join the comparisons with JavaScript’s || (“or”) operator. For example, the paths could be / and /contact. Change the color value and paths to match your site’s actual design and URLs. Hostinger’s example also demonstrates an all-except-one pattern using !== when a color should apply everywhere except a specified path.
Use ordinary JavaScript quotation marks when adapting the code. Keep a copy of the original code so you can remove or restore it if the result is not right. Hostinger’s published example calls setInterval without specifying a delay; its help article does not discuss performance or establish that the selectors will remain stable. Treat it as the vendor’s documented example, not independently tested code.
Verify the result and troubleshoot visibility
Hostinger states that custom-code changes are visible in preview mode and online, but not inside the editor. Therefore, an unchanged editor view does not by itself mean the code failed; check preview and the published site after saving and publishing.
If the header is missing from the editor, Hostinger notes that it may be because every page is hidden from the navigation menu. Header background, transparency, font, and regular and hover text colors are in the header’s Style settings. For navigation styling, use the Header settings; site-wide colors are in the Styles panel, while individual elements can be styled locally.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
