Make header bar transluent while keeping full opacity on certain elements

  • Resolved Devin Clark

    (@dclark1104)


    8 years, 3 months ago

    Hello there,

    I went into the CSS and added a line in the code that defined a specific opacity for the header bar. As you can see from my screenshot, the header bar looks great, but the logo, text, and menu button are all not in the foreground as the opacity code is also affecting those elements.

    I’ve tried adding opacity: 1.0; to the specific logo and text sections in the CSS, but no luck unfortunately.

    Can anybody give any suggestions on how I might be able to keep the translucent effect on the bar, but have the elements on it appear in the foreground?

    Thanks in advance! (We are using the PRO version by the way…)

    Screenshot:
    – https://docs.zoho.com/file/rfap56fb5f59f00124a6381424ab9959a6089

    https://wordpress.org/plugins/responsive-menu/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Christi Nickerson

    (@christini)

    8 years, 3 months ago

    Opacity sets the opacity value for an element and all of its children; so that’s why you are having issues with the elements inside of your header bar.

    Use RGBa in the background color declaration for your header bar, which allows you to control the opacity of the background color:

    https://css-tricks.com/rgba-browser-support/

    Hope this helps!

    Plugin Contributor responsivemenu

    (@responsivemenu)

    8 years, 2 months ago

    Hi Devin,

    Apologies I have been away on holiday for a while but am back now.

    Thanks Christi for answering on my behalf.

    Devin, this is more of a CSS issue than a problem with my plugin and everything Christi has said is correct!

    All the best

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Make header bar transluent while keeping full opacity on certain elements’ is closed to new replies.