0

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>

1 respuesta 1

1

No está mal lo que venías haciendo, el problema está en el selector del CSS, al hacer + con estilos, estás diciendo que tome el siguiente nodo con el mismo nivel del cuál estás entonces por eso no te tomaba el cambio, lo que deberías hacer es cambiar de posición el input y hacer lo mismo pero agregando la clase .navegacion, quedando algo así en el HTML:

...
<div class="menu-movil">
  <label for="toggle"><i class="fas fa-bars"></i></label>
</div>

<!-- Muevo el input -->
<input type="checkbox" id="toggle" />
<nav class="navegacion" id="">
...

Y en los estilos CSS así:

...
#toggle:checked + .navegacion .nav-items {
  top: 0;
}
...


Nota: te dejó acá los selectores de CSS con varios ejemplos de cada selector, te va a resultar bastante útil.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.