Title: Make header bar transluent while keeping full opacity on certain elements
Last modified: August 31, 2016

---

# Make header bar transluent while keeping full opacity on certain elements

 *  Resolved [Devin Clark](https://wordpress.org/support/users/dclark1104/)
 * (@dclark1104)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/make-header-bar-transluent-while-keeping-full-opacity-on-certain-elements/)
 * 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://docs.zoho.com/file/rfap56fb5f59f00124a6381424ab9959a6089)
 * [https://wordpress.org/plugins/responsive-menu/](https://wordpress.org/plugins/responsive-menu/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Christi Nickerson](https://wordpress.org/support/users/christini/)
 * (@christini)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/make-header-bar-transluent-while-keeping-full-opacity-on-certain-elements/#post-6930460)
 * 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/](https://css-tricks.com/rgba-browser-support/)
 * Hope this helps!
 *  Plugin Contributor [responsivemenu](https://wordpress.org/support/users/responsivemenu/)
 * (@responsivemenu)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/make-header-bar-transluent-while-keeping-full-opacity-on-certain-elements/#post-6930514)
 * 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.

 * ![](https://ps.w.org/responsive-menu/assets/icon-256x256.png?rev=1782326)
 * [Responsive Menu - Create Mobile-Friendly Menu](https://wordpress.org/plugins/responsive-menu/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/responsive-menu/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/responsive-menu/)
 * [Active Topics](https://wordpress.org/support/plugin/responsive-menu/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/responsive-menu/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/responsive-menu/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [pro](https://wordpress.org/support/topic-tag/pro/)

 * 2 replies
 * 3 participants
 * Last reply from: [responsivemenu](https://wordpress.org/support/users/responsivemenu/)
 * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/make-header-bar-transluent-while-keeping-full-opacity-on-certain-elements/#post-6930514)
 * Status: resolved