Why doesn't the menu?

Good afternoon. When you click on a menu item (and adding, respectively, the class "active") menu disappears. Span does not work. What's the matter?
<div class="grid__menu">
 <div class="menu__button" id="menu_button">

.menu__button span {
 display: block;
 position: absolute;
 height: 9px;
 width: 100%;
 background: #ff4081;
 border-radius: 9px;
 opacity: 1;
 left: 0;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: .25s ease-in-out;
 -moz-transition: .25s ease-in-out;
 -o-transition: .25s ease-in-out;
 transition: .25s ease-in-out;
.menu__button span:nth-child(1) {
 top: 0px;

.menu__button span:nth-child(2) {
 top: 18px;
.menu__button span:nth-child(3) {
 top: 36px;
.menu__button--active span:nth-child(1) {
 top: 18px;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);

.menu__button--active span:nth-child(2) {
 opacity: 0;
 left: -60px;

.menu__button--active span:nth-child(3) {
 top: 18px;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);

Sample code
July 8th 19 at 11:39
2 answers
July 8th 19 at 11:41
And what happened to the class menu__button ? instead of having to add a class, you replace it.
Yes, thank you. I need to overwrite the css to treat the replaced class - Gwen.Dic commented on July 8th 19 at 11:44
: Just replace the selector - rowan43 commented on July 8th 19 at 11:47
for example : the div[class^="menu__button"] - rowan43 commented on July 8th 19 at 11:50
Yes, but I did something like this codepen.io/TsarS/pen/pbRMNv .menu__button span,.menu__button--active span - Gwen.Dic commented on July 8th 19 at 11:53
July 8th 19 at 11:43
At the end of the question, "Sample code" - Gwen.Dic commented on July 8th 19 at 11:46

Find more questions by tags JavaScriptCSS