2

Hola como están? Tengo el siguiente problema, estoy tratando de crear un simple sidebar con flexbox, importe dos iconos desde font awesome, los cuales funcionan a la perfección, el problema esta cuando hago hover sobre el icono de hamburguesa para que el menu se despliegue, los iconos se elevan hacia arriba, en el codigo tengo aplicada la propiedad align-items

* {
  margin: 0;
  padding: 0;
  border: 0;
}


/*Menu Styles*/

.navbar {
  background-color: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 320px;
  height: 40px;
}

.logo {
  margin-left: 15px;
  width: 24px;
  height: 24px;
}

.fa-bars {
  margin-right: 15px;
  color: #060A24;
}

.fa-bars:hover+.lista {
  display: block;
}

.lista {
  display: none;
  margin-top: 16px;
  width: 320px;
  height: 224px;
  background-color: #0000EC;
  list-style: none;
  text-decoration: none;
}

.link {
  line-height: 28px;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  font-family: ibm plex mono;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/styles.css">
  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,500|IBM+Plex+Sans:400,600&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/1ba5e8b5e2.js"></script>
  <title>Document</title>
</head>

<body>
  <nav class="navbar">
    <img src="/img/logo.svg" alt="logo" class="logo">
    <i class="fas fa-bars"></i>
    <ul class="lista">
      <li class="elements"><a class="link" href="">EPISODIOS</a></li>
      <li class="elements"><a class="link" href="">NOSOTROS</a></li>
      <li class="elements"><a class="link" href="">ENTREVISTAS</a></li>
      <li class="elements"><a class="link" href="">TÓPICOS</a></li>
    </ul>
  </nav>
</body>

</html>

para centrar los iconos dentro del sidebar, me arroja error tanto con center como con flex-end, con flex-start funciona a la perfección, no se que es lo que puede estar fallando, espero que alguien pueda explicarme el funcionamiento correcto, gracias.

3
  • 1
    Hola, veo que hay una vibración cuando pasas el mouse por encima del icono, tal vez te sirva revisar esta respuesta ¿Por qué vibra al hacer hover al borde de cada icono? el 22 sep. 2019 a las 23:23
  • 1
    Acabo de revisarlo y el error se debe a lo mismo, esta fallando por la propiedad align-items: center / flex-end, con flex-start esto no sucede, pero gracias por la observación. el 22 sep. 2019 a las 23:44
  • 1
    Probaste usando: visibility: hidden; en .lista y visibility: visible; en .fa-bars:hover+.lista en lugar del display:block; y display: none; Ya que esto sucede por la posición <i> (.fa-bars).
    – ZeroCool
    el 23 sep. 2019 a las 4:15

1 respuesta 1

2

El problema que tienes es que el ul está dentro del nav y forma parte del flexbox por lo que la altura inicial de 40px no se respeta al mostrarlo, la solución más sencilla sería sacar el ul del flujo del flexbox con una posición absoluta:

* {
  margin: 0;
  padding: 0;
  border: 0;
}


/*Menu Styles*/

.navbar {
  background-color: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 320px;
  height: 40px;
}

.logo {
  margin-left: 15px;
  width: 24px;
  height: 24px;
}

.fa-bars {
  margin-right: 15px;
  color: #060A24;
}

.fa-bars:hover+.lista {
  display: block;
}

.lista {
  display: none;
  position:absolute;
  top:40px;
  width: 320px;
  height: 224px;
  background-color: #0000EC;
  list-style: none;
  text-decoration: none;
}

.link {
  line-height: 28px;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  font-family: ibm plex mono;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/styles.css">
  <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,500|IBM+Plex+Sans:400,600&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/1ba5e8b5e2.js"></script>
  <title>Document</title>
</head>

<body>
  <nav class="navbar">
    <img src="/img/logo.svg" alt="logo" class="logo">
    <i class="fas fa-bars"></i>
    <ul class="lista">
      <li class="elements"><a class="link" href="">EPISODIOS</a></li>
      <li class="elements"><a class="link" href="">NOSOTROS</a></li>
      <li class="elements"><a class="link" href="">ENTREVISTAS</a></li>
      <li class="elements"><a class="link" href="">TÓPICOS</a></li>
    </ul>
  </nav>
</body>

</html>

3
  • Muchas gracias por tu comentario, fue de mucha ayuda, el problema se soluciono. el 23 sep. 2019 a las 22:16
  • Otra consulta, position absolute no se calcula respecto al elemento padre mas cercano con un position dado? En este caso como se estaria calculando, con respecto a quien? si navbar solo tiene un display, no tiene un position. el 23 sep. 2019 a las 22:40
  • 1
    Como no hay ningún padre con position se posiciona respecto al body, en este caso funciona porque no hay nada más pero sería mejor que el nav tuviera un position:relative para asegurarse de que el menú se mantiene en su sitio
    – user7176
    el 24 sep. 2019 a las 5:07

Tu Respuesta

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

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