ハンバーガーメニュー、クロスの色を変更する方法

Question

問題があるので、どうすればよいですか？ このメニューのXボタンに何か問題がありました。私はそれを自分で行いましたが、すべて正しいですが、Xの色を変更しようとするとエラーが発生します。 Xの色を黒に変更したいと思います。 Theres a code

<button class="js-menu menu" type="button"> 
    <span class="bar"></span> 
</button> 

<nav> 
    <ul> 
     <li>Lorem ipsum</li> 
     <li>Lorem ipsum</li> 
     <li>Lorem ipsum</li> 
     <li>Lorem ipsum</li> 
     <li>Lorem ipsum</li>  
    </ul> 
</nav> 

Answer 1

変更クラス.active:after.active:before

.active & { 
    background: none; 
    &:after, 
    &:before{ 
    background: red; 
    } 

http://codepen.io/pranesh-r/pen/gwkNwY

Answer 2

あなたは .activeクラスで色を変更することができ

.active & { 
    background: none; 
    &:before, 
    &:after { 
     top: 0; 
     background:red 
    } 
} 

Answer 3

の背景CSSの疑似セレクタにbackground colorを追加してください。コードに以下を追加してください。

.active .bar::before, .active .bar::after { 
    top: 0; 
    background: #000; 
}