Tengo un menu horizontal hecho pero ahora quiero que cuando la pantalla sea mas o menos del tamaño del celular apareza un icono el cual si lo tocas se despliega el menu en forma vertical mi unico problema es que no me aparece el menu cuando hago click en el icono que tiene la clase check
body{
background: #786767;
}
header{
width: 100%;
height:90px;
background: white;
position: fixed;
z-index: 100;
}
.container-header{
width: 100%;
max-width: 2000px;
position: relative;
display: flex;
}
.container-logo-title{
display: flex;
}
.container-logo-title img{
width: 80px;
height: 80px;
margin-left: 10%;
padding: 2px;
margin-top:5px
}
.container-logo-title H1
{
font-weight: 500;
margin-top: 23px;
margin-left: 10PX;
font-size: 25px;
}
.container-menu{
position: absolute;
right: 0px;
}
.menu ul{
display: flex;
margin-right: 20px;
margin-left: 10px;
}
.menu ul li{
list-style: none;
float:right;
margin-top: 30px;
margin-left: 10px;
font-size: 20px;
}
#check
{
display:none;
}
.icon-menu
{
justify-content: flex-end;
display:none;
}
.menu li a {
padding: 15px;
position: left;
text-decoration: none;
color: black;
font-size: 20px;
}
.menu li a:hover {
background: #9D0B1D;
border-radius: 20px;
}
@media(max-width: 888px){
.container-logo-title H1
{margin-top: 29px;
font-size: 18px;}
header label{
display: block;
}
.menu {
position: absolute;
background: white;
width: 70%;
margin-left: -70%; /*como es negativo se sale del pantalla*/
transition: all 0.5s;
float: right;
margin: 90px;
border-radius: 20px;
}
.menu ul{
flex-direction: column;
}
.icon-menu
{
display: flex;
margin-left: auto;
font-size: 25px;
margin-right: 8px;
margin-top: 18px;
padding-top: 11px
}
.icon-menu:hover{
background: #9D0B1D;
border-radius: 30px;
cursor:pointer;
}
.check:checked ~.menu{
padding:0px;
z-index: 300px;
}
}
<div class="container-header">
<div class= "container-logo-title">
<img src="imagenes/logo.jpg" class="img-logo">
<H1>MELAMOBLAMIENTOS</H1>
</div>
<input type="checkbox" id="check" id ="btn-menu">
<label for="check" class="icon-menu"></label>
<div class="container-menu">
<nav class= "menu">
<ul>
<li><a href="#Inicio">Inicio</a></li>
<li><a href="#Servicios">Servicios</a></li>
<li><a href="#Trabajos">Trabajos</a></li>
<li><a href="#Contacto">Contacto</a></li>
</ul>
</nav>
</div>
</div>