Estoy intentado realizar un menú "hamburguesa" responsive desplegable utilizando un <input type="checkbox />
con id:"toggle" con un label for:"toggle", lo que pasa es que al poner la ventana en una resolución máxima de 768 saco el menú fuera de la pantalla y al apretar sobre el menú hamburguesa debería volver a su posición inicial, cosa que no pasa, la verdad es que he intentado utilizar :checked
para cambiar el color de la barra de de menú, tamaño de letra, etc para probar si funcionaba y no, no funciona con nada de lo que haga, pero el input
si se activa y desactiva al apretar sobre el menú hamburguesa.
Esto es lo que hice hasta ahora:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
background-color: #fff;
}
/* Style for barra*/
div.barra {
background-color: #283149;
height: 80px;
}
div.logo {
top: 24px;
position: relative;
left: 100px;
display: inline;
}
header div.logo a {
text-decoration: none;
font-size: 20px;
color: #f73859;
font-family: 'Gugi', cursive;
}
header nav.navegacion {
float: right;
position: relative;
right: 150px;
top: 0;
}
nav ul {
position: relative;
top: -11.5px;
margin: 0 auto;
padding: 0;
float: left;
list-style: none;
display: inline-block;
border-radius: 5px;
}
nav ul li {
float: left;
height: 50px;
width: 130px;
text-align: center;
padding-top: 10px;
}
nav ul li a {
text-decoration: none;
font-weight: bold;
font-size: 18px;
color: #f73859;
font-family: 'Open Sans', sans-serif;
}
nav ul ul {
position: absolute;
display: none;
background-color: #283149;
}
nav ul li:hover>ul {
position: relative;
display: block;
top: 14px;
}
nav ul li:hover {
background-color: #404b69;
border-radius: 5px;
}
/*Menu movil*/
header div.menu-movil label {
display: none;
float: right;
margin: 0 0px;
color: #f73859;
font-size: 30px;
}
header div.menu-movil input {
display: none;
}
header div.menu-movil label:hover {
background-color: #404b69;
}
/* Media Queries Time */
@media only screen and (max-width:768px) {
header nav.navegacion ul {
position: absolute;
right: -100px;
background-color: #283149;
margin: 0;
}
ul.nav-items {
top: -180px;
}
#toggle:checked+.nav-items {
top: 0;
}
header div.menu-movil label {
display: block;
position: relative;
right: 50px;
top: -10px;
}
div.logo {
left: 50px;
}
}
<header class="site-header">
<div class="barra">
<div class="logo">
<a href="#">Mentor's Army</a>
</div>
<div class="menu-movil">
<input type="checkbox" id="toggle">
<label for="toggle"><i class="fas fa-bars"></i></label>
</div>
<nav class="navegacion" id="">
<ul class="nav-items">
<li> <a href="#">Mentors</a>
<ul class="">
<li> <a href="#">Wealth</a> </li>
<li> <a href="#">Health</a> </li>
<li> <a href="#">Spirituality</a> </li>
</ul>
</li>
<li> <a href="#">Blog</a> </li>
<li> <a href="#">More</a> </li>
</ul>
</nav>
</div>
<!-- Fin de la barra de navegación con logo-->
</header>