[Resolved] My header is transparent after merging header with content

[Robert]

Hi, I want my page header to be white or a transparency. But after I followed the instructions to merge the header with the content (Im using Elementor builder) it has become totally transparent and I don’t know what to do to make it white again.

My website is below but I made a temp subscriber login as the site is in Coming Soon Mode

GP Premium 1.2.94

[Tom]

Hi Robert,

Merging your header with the builder below will always make the header transparent. Without making it transparent, it would look the exact same as not having it merged.

Let me know if I’m missing something 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Robert]

Hi Tom, thanks for replying.

I agree with what you are saying, however, I have created websites where the header was transparent but not totally clear. Such as a 50% white header. In those cases, the image below it is slightly visible and goes right to the top.

Prior to merging the header and content, the content started where the header ended. Therefore, a transparent header would not show any effect.

I hope that makes sense and you can see what I am talking about.

[Leo]

Hi Robert,

You should be able to achieve that without merging the header and just use the opacity option in Customizer > Colors > Header > Background.

Let us know if this helps!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Robert]

OK, thanks, I will try that this week and let you know how it goes. Thanks!

[Tom]

If you want the transparency to show the section below the header, then you would actually need to have the header merged as you were doing.

I have it planned to add the transparency pickers to the merged header/navigation options.

For now, you could do this:

.generate-merged-header .site-header {
    background-color: rgba( 255,255,255,0.5 );
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Robert]

Hi Tom, thank you for your help. I’ll try that code. Much appreciated.

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Robert]

This worked, thank you.

Question for you. I added the CSS in Customize / Additional CSS.

When the theme updates, will it keep my revisions in CSS here or is it essential that I have a child theme?

Thanks.

[Tom]

Your CSS in there will be safe from updates 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Robert]

awesome, thanks!

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Robert]

Ran into a similar issue. Cam across this after a search. I think the confusion for some is that they are expecting a semi-transparent header or the option to add it. Do you think this will be something added to GP anytime soon as a built in option?

[Tom]

There hasn’t really been a huge demand for an option, but I’ll definitely keep it in mind 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Robert]

Thanks Tom. I’ve seen a lot more themes implement this as of late, maybe poll the group? lol 😛

[Author]

Posts