Hello,

I am currently facing an issue with my website where the Salient transparent header does not display correctly over a full-screen background image. I have followed the documentation and tried multiple solutions, but the problem persists.

• I am using a full-width background image in a row at the top of my page.
• The header, even though set to be transparent, appears with a solid white background and does not overlay the background image as intended.
• On mobile, the issue persists, and the menu cannot be seen against the white background.

1. Enabled Transparent Header:
   • In Salient Options → Header Navigation → Transparent Header Effect → "Use Transparent Header When Applicable" is enabled.
   • The "Header Starting Text Color" and "Dark Text Color" options have been set to ensure visibility.
2. Color Scheme Adjustments:
   • Under Salient Options → Header Navigation → Color Scheme, I ensured there is no background color applied to the "Header Background" in the "Main Navigation" section.
3. Page Row Settings:
   • I set up a row with a full-width background image:
     • Type: Full Width Background
     • Background Image: Uploaded with Center Center positioning, set to "No Repeat"
     • Background Size: "Cover" was applied.
   • However, the transparent header still displays white, not overlaying the image.
4. CSS Attempts: I tried custom CSS to force transparency and overlay behavior:

   css
   Copier le code
   #header-outer {      background: transparent !important;  }  
   #header-space {      display: none;  }  
   

   • While this removes the background color, it does not fully solve the issue, and sometimes a "gray area" still appears below the header.
5. Browser Inspect Tool: I used the Chrome Developer Tools to check for conflicting CSS. However, even after manually forcing background: transparent on #header-outer and related elements, the issue persists.
6. Checked for Plugin Conflicts:
   • I disabled all plugins to ensure no third-party plugin interferes.

I would like the header to be fully transparent and to overlay the full-screen background image as seen on websites like https://bravoluxuryretreats.com/

Could you please guide me on the correct steps or settings to achieve this? Let me know if any theme settings, row configurations, or additional CSS are required.

Thank you for your support, and I look forward to your response.

Best regards,

Yannick Stragliati

Hi, thx for answering, the problem IS my site is coming soon mode, im just starting building it, with gpt, i can't do anything on my own

Hi, I face the similar issue. I have a background image in the first full width row of my pages, the header gets a white background when scrolling down. I update Salient, and now on all of my pages instead of the homepage the transparency of the header is gone (?). Also if I copy the homepage or make a new page the header is not transparent and can also not be forced to be, either in the new header transparency option in the Salient menu or with the 'force transparency option' on the bottom of the page? I regret the upgrade to the latest version.. :(
Does anyone have an idea of how to fix this?
 My site: https://www.waldhauswulmeringhausen.de/

Hi Andrew,

Thanks for your reply.  Enabling the permanent transparent header option in the Salient > Header Navigation > Transparent Header unfortunately has no effect; the header becomes transparent on my homepage also when scrolling down, but remains white on the other (copied) pages....
Please check https://www.waldhauswulmeringhausen.de/ en go to: NL and back to DE

Ps. this is a cloned/copy of the page that does work. In the copy the header also isn't transparent, despite the fact that I checked force header transparency 

https://www.waldhauswulmeringhausen.de/copy

I found out more.. It turns out that the transparency of the header is only there on my homepage. That is to say, if I change my homepage settings (appearance -> customize ) the new homepage get the transparent header and the header of the previous home get it's white background. This issue came up only after updating Salient to its newest version.

Any ideas what might be the issue here?

That solved the issue! Thanks so much!