Menu Responsive falla en dispositivos
Buenas tardes, tengo un problema con mi Menu Responsive. Lo cree solo con CSS y HTML. El problema es que me funciona en la pc, cuando utilizo las herramientas de desarrollador y lo pruebo con la opcion de responsive en diferentes tamaños tambien funciona.
Mi problema, es que cuando lo subo al host, y lo pruebo desde el dispositivo movil, no me funciona. Me cambia el icono de hamburgesa al icono de cerrar, pero no me aparece nunca el menu.
<input type="checkbox" id="res-menu">
<label for="res-menu">
<i class="fa fa-bars" id="sign-open"></i>
<i class="fa fa-times" id="sign-close"></i>
</label>
/* NAV - HEADER */
.header{
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 120px;
width: 100%;
overflow: hidden;
background-color:rgb(255, 255, 255);
z-index: 1000;
border-bottom: 1px solid transparent;
box-shadow: 0 0 10px var(--second-color);
transition: height 1s,
font-size 1s;
}
.header .logo{
position: absolute;
height: auto;
display: flex;
width: 300px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
transition: width 1s,
margin 1s;
}
.nav{
position: relative;
width: 98%;
margin: auto;
}
label <a href="/comunidad/publicaciones?q=%23sign" data-community-hashtag="true">#sign</a>-open,
label <a href="/comunidad/publicaciones?q=%23sign" data-community-hashtag="true">#sign</a>-close{
display: none;
font-size: 30px;
color: block;
line-height: 50px;
margin-right: 30px;
cursor: pointer;
}
<a href="/comunidad/publicaciones?q=%23res" data-community-hashtag="true">#res</a>-menu{
display: none;
}
.ul{
text-align: right;
float: none;
width: 90%;
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
}
[@media](https://ed.team/media) screen and (max-width:1080px){
.header .logo{
width: 200px;
top: 50%;
left: 50%;
margin-top: -70px;
margin-left: -100px;
transition: width 1s,
margin 1s;
}
.nav{
width: 90%;
display: flex;
position: relative;
margin: auto;
justify-content: space-between;
align-items:center;
}
.ul{
position: fixed;
display: flex;
justify-content: center;
flex-direction: column;
top: 120px;
left: -100%;
width: 70%;
background-color: rgba(255, 255, 255, 0.904);
height: calc(100vh - 120px);
overflow: hidden;
padding: 5px;
transition: left .5s ease-in-out;
z-index: 10000;
}
label <a href="/comunidad/publicaciones?q=%23sign" data-community-hashtag="true">#sign</a>-open {
display: block;
}
<a href="/comunidad/publicaciones?q=%23res" data-community-hashtag="true">#res</a>-menu:checked ~ .ul {
top: 120px;
left: 0;
}
<a href="/comunidad/publicaciones?q=%23res" data-community-hashtag="true">#res</a>-menu:checked ~ label <a href="/comunidad/publicaciones?q=%23sign" data-community-hashtag="true">#sign</a>-open {
display:none;
}
<a href="/comunidad/publicaciones?q=%23res" data-community-hashtag="true">#res</a>-menu:checked ~ label <a href="/comunidad/publicaciones?q=%23sign" data-community-hashtag="true">#sign</a>-close {
display: block;
}
}