Unable to Change Opacity of Search Input Box and Button Backgrounds

On my website at https://plantbest.com/ca/ I have made the opacity of the header to be .7 but I would like the search input box background and button background to have an opacity of 1.

I can't figure out how to override the header opacity. Would appreciate your help.

Support access is granted.
Thank you.

  • Nithin
    • Support Wizard

    Hey Mary,

    Hope you are doing good today. :slight_smile:

    I can't figure out how to override the header opacity. Would appreciate your help.

    The issue is that opacity will get applied to all it's child elements, so easier would be remove the 0.7 opacity, and instead of that add the following code. The current code is:

    header#masthead {
        margin-top: 30px;
       opacity: .7;
    }

    Chang the above CSS to:

    header#masthead {
        margin-top: 30px;
       background: rgba(255,255,255,0.7);
    }

    This should make it work, please test, and let us know how that goes. Have a nice day. :slight_smile:

    Best Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.