В мобильной версии не работает transform translatey ?

@media(max-width:576px) {
    .logo{
       display: none;
   }

  .container{
      height: 100%;
  }

   .menu {
    transform: translateY(0%); вот тут вообще не выходит 
    top: 60px;
    height: 50%;
}

.menu-nav{
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    }
}
-----------------------------------------------------десктопная версия------------------------------
тут тот же класс 

.menu{
   
    transform: translateY(-200%);
     z-index: -1;
    background-color: #507fe1;
    width: 100%;
    position: fixed;
    top: 80px;
    left: 0;
    padding-top: 16px;
    padding-bottom: 16px;

}

я и z - index  и одинаковый position юзала не  выходит