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.
The Problem:
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.
What I Have Tried So Far:
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.
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.
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.
CSS Attempts:
I tried custom CSS to force transparency and overlay behavior:
While this removes the background color, it does not fully solve the issue, and sometimes a "gray area" still appears below the header.
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.
Checked for Plugin Conflicts:
I disabled all plugins to ensure no third-party plugin interferes.
What I Need Help With:
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.
To clarify, the transparent header only works when certain conditions are met. These are instances where this will get used include using a Page Header or using a Full width/screen Nectar Slider at the top of a page.
Instead of using a full-screen background image, I recommend adding the image as a page header in the page header metabox settings. Here's our guide that can help you with this https://themenectar.com/docs/salient/page-metaboxes/#pageheader. You can access the metaboxes by editing the specific page on the backend editor, and then scrolling down to the metaboxes. Here's a screenshot of the same.
Alternatively, you can also force the transparent header in the same page header metabox settings.
I hope this info helps, try that and let us know how it goes.
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.
The Problem:- 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.
What I Have Tried So Far:- 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.
- 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.
- 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.
- CSS Attempts:
I tried custom CSS to force transparency and overlay behavior:
- While this removes the background color, it does not fully solve the issue, and sometimes a "gray area" still appears below the header.
- 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.
- Checked for Plugin Conflicts:
- I disabled all plugins to ensure no third-party plugin interferes.
What I Need Help With:css Copier le code #header-outer { background: transparent !important; } #header-space { display: none; }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 Yannick,
Thank you for getting in touch.
Please share your site URL so we can check this out for you.
We look forward to your reply.
Thanks,
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 Yannick,
Thank you for getting back to us.
To clarify, the transparent header only works when certain conditions are met. These are instances where this will get used include using a Page Header or using a Full width/screen Nectar Slider at the top of a page.
Instead of using a full-screen background image, I recommend adding the image as a page header in the page header metabox settings. Here's our guide that can help you with this https://themenectar.com/docs/salient/page-metaboxes/#pageheader. You can access the metaboxes by editing the specific page on the backend editor, and then scrolling down to the metaboxes. Here's a screenshot of the same.
Alternatively, you can also force the transparent header in the same page header metabox settings.
I hope this info helps, try that and let us know how it goes.
Regards,