Site logo

Archived topic

Transparent Header

17 replies · Started by Neil on September 18, 2015

Viewing posts 1–15 of 18

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

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.

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 :)

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

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.

Thanks!

No problem :)

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

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);
}

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

That's the advatnage of using a Child Theme, you can make changes, and the update wont affect it ;)

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.

This archived topic is closed to new replies.