IE Header Opacity Problem

Hi Tom

Thanks for your support, it’s most appreciated.

Try instead using the following:

/* Header */

@media (min-width: 1024px)
.overlap .site-header:not(.fixed) {
	background: rgba(0, 0, 0, 0.85);
}

This assumes you continue to use a black header. If you change the header colour just change the 0, 0, 0 value to your preferred colour rgb value. This will require that you have the slider overlap setting enabled.

Let me know how it goes. Hopefully it makes a difference 🙂

Thanks for getting back to me so quickly!

I took out:
.site-header {
opacity: 0.85;
}

and put in the code you provided and it unfortunately didn’t work, it took away the opacity all together.
Sorry I should have provided more info:
The header background is an image and the logo it a PNG image with a transparent background.
I set the opacity of the header to 0.85 which worked fine in both Chrome and IE, but the issue was that in IE it didn’t show the logo or menu items, but successfully showed the header background image with the opacity applied.

Hope this info helps explain the problem better, sorry for the vague info from before.

Also, on another question, as im making all these changes to the CSS file, would I be best making a child theme?

Thanks again,
Tom

Just had another look and next to the code it has a red x and says
“Expected LBRACE at line 7, col 1
Rule is empty”

Line 7 was this: .overlap .site-header:not(.fixed){

Hi Tomas

Thanks for all the feedback.

All WordPress themes completely overwrite their own folder during theme updates so if we release an update for Ultra and you run that update you’d lose all changes made to theme files. If you’re only making CSS changes then you don’t need to use a child theme and a plugin like Simple Custom CSS will be perfect.

You’re using SiteOrigin CSS, that’s perfect, so no need to install anything else.

The rule that’s empty can be found at Appearance > Custom CSS. You can remove it there.

Try the following to set opacity of the background image:

/* Header */
.site-header:before {
    opacity: 0.85;
}

Insert the above at Appearance > Custom CSS.

Great stuff regarding the child theme, I’m glad I wont be having to tackle that!

Thanks for the new code, it works, but its not as transparent as the original code and if i change it below 0.85, it goes very white

Is there anything else I could try? Don’t worry if not!

Many thanks,
Tom

Sure, try going to Appearance > Customize > Theme Design > Header and set the Header Background to black. Hopefully, that does the trick. Let me know how it goes.

Thanks for all your help – managed to get it to how I wanted!

Awesome 🙂 Thanks for the update.