Opacity of header

[Liam Pike]

Some of my header photo colours are such that my logo and menu doesn’t stand out enough. I want to put a black semi-opaque bar behind the logo and menu to make them stand out better on all images. I’ve added CSS code as follows:

}
body.absolute-menu .site-header {
background: #000000;
opacity: 0.5;
}

However, the logo and menu seem to appear 0.5 opaque too rather than 1.0 opaque.

How can I keep the logo and menu at 1.0 so the colours are vivid and stand out against the 0.5 background bar?

Kind regards

Liam.

[Andre Flores]

Hello Liam,

You may use the following code to add a 0.5 opacity black background:

body.absolute-menu .site-header {
	background: rgba(0, 0, 0, 0.5);
}

Regards,
Andre

[Liam Pike]

Thanks. That’s worked, but the header seems to overlap with the box around the text overlaid over the images on the slider.

I’ve used:

div.child-page-content-wrapper {background: rgba(0, 0, 0, 0.2);
}

to try to make the text over the images easier to read, but the area that’s got the opacity is too large – far larger than the text (both horizontally and vertically). It is possible to limit the opacity to the area nearer the text please? The website is dev20.bongoholidays.co.uk.

[Andre Flores]

Hello Liam,

The code you have used is the closest to what you are trying to achieve. Alternatively you may add opacity background to the slide title and content separately, but it will not look really nice. You may try the code below to see how it will look like:

.luviana-front-page-header .child-pages-list .child-page-title {
	background: rgba(0, 0, 0, 0.2);
}
.luviana-front-page-header .child-pages-list .child-page-content {
	background: rgba(0, 0, 0, 0.2);
}

Regards,
Andre

[Author]

Posts