[Resolved] Transparent header issue

[Robert]

I’m having an issue with the transparent header. For some reason, despite me having specified both under heads and in the customize section a color, it’s being overridden as seen here: https://cl.ly/1X0E2s0Z211g. Any ideas?

[Leo]

Hi there,

Can you link me to the site? Thanks!

[Robert]

The site is local at the moment. Is there anything else I can provide in the mean time? I have a fairly vanilla install, literally no other plugins or customizations. Just the latest version of E pro and GP premium. Not doing anything fancy. When I specified the transparency options for the header under customizer they stick and show fine however when I do “merge with site header” thats when the header becomes completely transparent and overrides the transparency functional as shown in my initial screenshot.

Here are my header settings (for the most part)

https://cl.ly/0V290G301M33.

As an aside, it would be nice to be able to do this feature without a “hack” which is to specify a span under content.

[Leo]

Do you have custom navigation set here? https://docs.generatepress.com/article/merging-header-navigation-content/#merging-our-header

[Robert]

Nope, don’t have that set either. It’s not really the navigation, it’s the entire header that is transparent.

I know I can simply try to override this in css:

.generate-merged-header .site-header {
    background: transparent;
}

I’m curious as to why the following is being overwritten to begin with. I may be doing something wrong here… I don’t want a completely transparent header, just a header with a semi-transparent background as shown below. It seems like .generate-merged-header is just trying to make it completely transparent. Not sure if it’s a setting I accidentally enabled.

.site-header {
    background-color: rgba(140,140,140,0.57);
    color: #3a3a3a;
}

[Leo]

It’s a bit hard to picture what’s going on but I don’t think it’s a conflict.

Can you duplicate this on a test server so I can see?

[Robert]

I did a search in the forum and it looks like maybe I made an assumption about how the transparent header should work. According to Tom, it is completely transparent, and you can’t then include a semi-transparent background option to it and thus have to do it via CSS, is that correct? I just want to make sure there is no option i’m missing.

[Leo]

ahh yeah just saw your reply in that post too.

Yes CSS solution will have to do for now.

[Robert]

Thank you!

[Leo]

No problem 🙂

[Author]

Posts