Soy principiante en desarrollo de páginas Web. Estoy intentado realizar un menú "hamburguesa" responsive desplegable utilizando un <input type="checkbox />
con id:"check"
. Lo que pasa es que al poner la resolución ya en pantallas en cierto porcentaje la "hamburguesa" no reacciona. Ya intenté de muchas formas y no me funciona.
Esto es lo que hice antes de ver una pregunta con el mismo problema:
#check:checked ~ .menu{
right: 0;
}
<header>
<h2 class="logo">Corpotarive</h2>
<input type=" checkbox" id="check">
<label for="check" class="mostrar-menu">
≡
</label>
<nav class="menu">
<a href="#">Inicio</a>
<a href="#">Sobre Nosotros</a>
<a href="#">Blog</a>
<label for="check" class="esconder-menu">
×
</label>
</nav>
</header>
Luego de ver la posible solución en una situación similar puse lo siguiente:
#check:checked + .navegacion .menu{
right: 0;
}
<header>
<h2 class="logo">Corpotarive</h2>
<label for="check" class="mostrar-menu">
≡
</label>
<input type=" checkbox" id="check">
<nav class="menu">
<a href="#">Inicio</a>
<a href="#">Sobre Nosotros</a>
<a href="#">Blog</a>
<label for="check" class="esconder-menu">
×
</label>
</nav>
</header>
Javascript