Custom Header Transparent

Hello @pothound,

Thank you for reaching out,

We don’t have a transparent header like the design you are looking for. However, you can build your desired custom header with no limitations on its design.
Please follow the steps explained in this link: https://docs.oceanwp.org/article/355-how-to-create-a-custom-header

I hope it helps.
Best Regards

Hello @skalanter

Thank you, I have tried that, but I can not get it to be transparent. Any idea what I am doing wrong?

Thanks, Daniela

Hello @pothound,

Thank you for reaching out,

In this case, you can set a transparent background color for the header by navigating to the Customizer > header > General.
Also, ensure your custom header has a transparent background color.
If your header didn’t cover the content, then you can use the negative margin-bottom for the header like this: https://postimg.cc/0bbP8N33.

Please let me know if you have any questions about the above steps.

I hope it helps.
Best Regards

Hello @skalanter
I really appreciate your help here!

Have done all of that and somewhere there comes a color, not sure where:
site-header {

position: relative;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #f1f1f1;
z-index: 100;
}

The negative-margin bottom unfortunately does not work, as I can not change the margin for phones. Then everything is overlapping.

Hello @pothound,

Thank you for reaching out,

Build your desired header on your website, then only share a live URL from your website, and I’ll write a custom CSS for the header.

Note: your custom CSS doesn’t include the ID like “#site-header”. Test this one:

#site-header {
    position: relative;
    width: 100%;
    background-color: rgb(255 255 255 / 26%);
    border-bottom: 1px solid #f1f1f1;
    z-index: 100;
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website. Remember if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

Best Regards

Hey @skalanter

done it all, nothing changes…. not sure where the issue is. Looking forward to your CSS.
The URL is
https://unc.phd.temporary.site/

Regarding the CSS, all I wanted to show is, that if I do an inspection it says I have a white background. But I have not chosen it anywhere. Neither in the custom CSS nor somewhere in the customizer.

Hi @pothound,

Thank you for reaching out,

You can use the following CSS:

#site-header {
    margin-bottom: -239px;
    background: transparent !important;
}

Result: https://postimg.cc/Z0H11BWF.

You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/
For more information about media queries, please read this article:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

I hope it helps,
Best Regards

• This reply was modified 1 month, 2 weeks ago by Shahin.

Hi @skalanter

thank you very much. But as I mentioned further up, the negative bottom-margin does not work, as for mobile screens it needs to be removed. With your code now, it looks all scrambled up on a phone.

Which templates are used for the transparent header? I really wonder if it would not be much easier to just move the logo in its own row above the menu.

Thanks for those links, I do not know how to use it. What I tried to say is, that there is/was a color for the #site-header even though I had it set to transparent everywhere. I was just wondering where it was stored.

• This reply was modified 1 month, 2 weeks ago by pothound.

@skalanter ok found another solution. Removed the text on the slider and now it looks ok.

Thank you very much for your help.

I’m glad that you were able to resolve that.