Javascript: Opacity of togglebar inherited by navicon

Question

I'm using a javascript plugin for a sliding menu. The problem is when I change the opacity of the togglebar(.bpen-drawer), the navicon(.bpen-toggle-pad) inherits it even though i specified a different opacity for the navicon. I've tried !important on the navicon but it doesn't work. How can I bypass this inheritance then?

Here is the jsfiddle with javascript and css.

Please, provide a fully workable Fiddle so it can be tested and changed. — tiomno, Jan 22 '16 at 10:57
Sorry, my html wasn't being accepted for some reason. but thanks, as pointed out in the previous question of this nature, i used background: rgba on the parent and it worked. — Agni Scribe, Jan 22 '16 at 11:32

score 0 · Answer 1 · answered Jan 22 '16 at 11:00

No. That won't work even you set !important. If an element has opacity property then it will display based on opacity value. By default all child's are on opacity 1. So if you change opacity value on a child then that child will hide based on that opacity.

So here solution is, you have to change the HTML accordingly or you have to handle this by using js/jQuery

Javascript: Opacity of togglebar inherited by navicon

1 Answers1