Opacity of header

  • This topic has 3 replies, 2 voices, and was last updated 1 month ago by Andre Flores.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1038035
    Liam Pike
    Participant

    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.

    #1040790
    Andre Flores
    Moderator

    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

    #1045927
    Liam Pike
    Participant

    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.

    #1047587
    Andre Flores
    Moderator

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.