Semi transparent header

[spakpoy]

Hi,
Is there a way to make my header semi transparent ? I’d like to reduce the opacity by about 50%
Thanks

[Prasant]

Hello @spakpoy,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS:

header.masthead.masthead-stacked {
    opacity: 0.5;
}

To learn more about CSS opacity property then please take a look at following article.

https://www.w3schools.com/cssref/css3_pr_opacity.asp

Thanks.

[spakpoy]

Thanks for getting back to me. It doesn’t seem to work for me. The header becomes fully transparent.

[kory]

Howdy, @spakpoy!

Thanks for writing in! The above CSS provided will actually make the whole header transparent, not just the background (which is what I’m assuming you’re looking for). Also, the CSS selector provided will not currently match your setup, so that is why you’re not seeing anything happening.

Instead, try the following:

.x-navbar {
  background-color: rgba(255, 255, 255, 0.9);
}

This uses the rgba() color function in CSS, which allows us to specify our hue as a red / green / blue mixture with an alpha transparency value added to the end. The example above would keep your white background (as rgb(255, 255, 255) is pure white), and then allows for 10% alpha transparency. A little bit typically goes a long way with these sorts of effects, and you’ll want to make sure you don’t adjust it too drastically, which could make the text or other elements on top of that background illegible as you scroll through your website.

If you want to bump it down to true 50% transparency on that color, you would adjust the alpha value like so:

.x-navbar {
  background-color: rgba(255, 255, 255, 0.5);
}

If you’re finding that for whatever reason these changes aren’t taking effect, you can try appending the !important selector to force an overwrite:

.x-navbar {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

This should be avoided if possible, but can help you make sure you’re selector is right when playing around with styles.

Hopefully this helps to point you in the right direction, cheers!

[spakpoy]

Fabulous, that’s working perfectly now.
Thanks very much for the solution and all the explanations.

[nabeel]

Glad we could help.

Cheers!