汉堡菜单，如何更改十字架的颜色

Question

What should I do because I have a problem. There was something wrong with X button on this menu I did It myself, and everything is correct but when I try to change color of X there is an error. I would like to change the color of X to the black one. 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

Change the background of the class .active:after .active:before

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

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

Answer 2

You can change color with .active class

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

Answer 3

Add background color to the psuedo selectors in your CSS. Add the following to your code

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