[Resolved] Merge header background colour not working

[_blank]

Hi There,

I’ve setup a Page Header and have some issues with background colours. I’d like to make the background white and transparent rgba (255,255,255,0.75)

The navigation works perfectly but the header isn’t rendering rgba(255,255,255,0.75).

Also is it possible to make the Social icons the same value?

Thanks
Happy Friday
Scott

[Leo]

Hi there,

If I understand this correctly, you are hoping to apply an overlay color on top of your slider?

If that’s the case you would have to do that on the slider itself (using whatever plugin you created the slider with) and not through the page header options.

As for the social icons, try this CSS:

.header-widget .icon-set-lsi_widget-6 a {
    background-color: rgba(255,255,255,0.75) !important;
}

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

[_blank]

Hi Leo

Thats almost working, the header background isn’t displaying.
Is there any way to just a transparent background behind the header and navigation?
There’s a test page here:
http://mackiedev1.belowthenoise.co.uk/salvesengraham/home/home-copy/
Thanks
Scott

[Leo]

Try this CSS for the header background:

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

The navigation background can be adjusted in Page Header Advanced tab.

[_blank]

Hi Leo

Thats almost working – there’s just a gap on the header in safari and doesn’t work in chrome.
Thanks
Scott

[Leo]

The gap on left and right?

Try changing the header width to full: https://docs.generatepress.com/article/header-layout/#header-width

[_blank]

Hi Leo

Thanks thats working now.
Scott

[Leo]

No problem 🙂

[Author]

Posts