[Resolved] Transparent Header

[Neil]

Hello,
I am trying to make the header background transparent so that I see the background of the full site. I have created a png image with larger font for my title and tagline of the site.
Does this sound achievable?

http://jdbathrestore.co.uk

Cheers Neil

[Neil]

I have actually just about got it. I have just put the same image in the header background. They do not quite match up but the menu kinda hides this. I will maybe work out the xpos details later but for now I am loving this theme and plugins.

I can see me using this on multiple site because there is so many possibilities that you could make each site look different.

[Tom]

Hi there,

You can actually just delete the value from the Header Background field in “Customize > Colors > Header Colors”.

Once the value is deleted, the header should be transparent.

Let me know 🙂

[Collin]

Hi Tom – this fix no longer works (deleting bg color value). Any other work arounds for this? Thanks

[Tom]

Hi there,

It should still work the exact same way.

If you’re using Premium 1.2.94, there’s now an opacity color picker which you can use to bring the opacity to 0 as an alternative.

[Collin]

Thanks!

[Tom]

No problem 🙂

[Collin]

Tom – There’s no option for opacity within Page Header > Content > Background Color. Instead of a fully transparent header, merged with the navigation, I’m trying to achieve 50% opacity.

I also tried the opacity within Customize > Colors > Header but that did not change it. It remained at 100%.

Any ideas on a fix for this?

Thanks,
Collin

[Tom]

Ah, those options don’t have rgba color pickers yet.

You can leave the option blank for full transparency.

Otherwise you need to use CSS to target the page header on that page:

.page-header-content {
    background-color: rgba(34,34,34,0.5);
}

[imraan-ftg]

Hi Tom I am struggling to find-out how to make my header transparent and have different logo on transparent header. I am using Elementor

http://wordpress-109027-311775.cloudwaysapps.com/

http://myprintscreen.com/s/mj8y/565a555049

[Tom]

This article should help: https://docs.generatepress.com/article/merging-header-navigation-content/

I just updated a bit as well so it’s more clear what to do with the new update 🙂

[Christopher]

Hey Tom. How do you make the header transparent within the new update? Thanks.

[David]

That’s the advatnage of using a Child Theme, you can make changes, and the update wont affect it 😉

[Leo]

Hi Chris,

It should still be the same procedure as Tom linked here: https://docs.generatepress.com/article/merging-header-navigation-content/

What problem are you experiencing?

[Christopher]

Hey Leo, I got it to work. The interface on the advanced tab confused me. You have to set the transparency to 0 on Navigation background despite the icon being clear. If you don’t do that the backround will remain black.

[Author]

Posts