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;
}
}
Buenas tardes. Quería sugerir algo para las notas de los cursos, me es bastante molesto el auto guardado ya que escribo un poco, se me auto guarda y se me borra si sigo escribiendo y me empieza a escribir arriba. Quizás a alguno le resulte cómodo, en lo personal si me molesta bastante. La sugerencia es ver si pueden agregar una opción para que c/u active o desactive el auto guardado. Disculpen las molestias!! Gracias y espero no ofender a nadie y tampoco se si es el lugar para publicarlo.
Saludos
Que tal, como va. Queria saber como se puede utilizar el boilerplate sin tener que utilizar el pug, es decir utilizando html puro, muchas gracias.