CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Patryk Dąbrowski
Patryk Dąbrowski

Reputation: 177

Hamburger menu, how to change color of cross

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>

Upvotes: 0

Views: 253

Answers (3)

Mark Wilson
Mark Wilson

Reputation: 1354

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;
}

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

You can change color with .active class

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

Upvotes: 1

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

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

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

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

Upvotes: 1

Related Questions