1

Estoy aprendiendo a manejarme con las media query y me ha surgido un problema que no veo muy bien como solucionar. He ajustado mi media query para que cuando la pantalla tenga un tamaño determinado, las opciones de mi navbar desaparezcan y solo quede el espacio negro. (con el fin de después habilitar un menú hamburgesa)

El problema es que al quitar los elementos del navbar, su tamaño disminuye verticalmente, debido a la ausencia de elementos. ¿Cómo puedo hacer que el navbar siga ocupando el mismo espacio con sus elementos y sin ellos?

#navbar {
  display: flex;
  padding: 15px;
  background: black;
  font-family: 'Nanum Gothic', sans-serif;
}
#navbar a {
  text-decoration: none;
  margin-right: 20px;
  padding: 5px;
  float: left;
  color: white;
}

@media only screen and (max-width: 570px) {
  #navbar a {
    display: none;
  }
}
<nav id="navbar">
  <a href="#">Home</a>
  <a href="#">Productos</a>
  <a href="#">Log In</a>
  <a href="#">About Us</a>
  <a href="#">Contactanos</a>
</nav>

1 respuesta 1

2

Si solo necesitas que no sean visibles, podes utilizar visibility: hidden;

Ejemplo:

#navbar {
  display: flex;
  padding: 15px;
  background: black;
  font-family: 'Nanum Gothic', sans-serif;
}
#navbar a {
  text-decoration: none;
  margin-right: 20px;
  padding: 5px;
  float: left;
  color: white;
}

@media only screen and (max-width: 1200px) {
  #navbar a {
    visibility: hidden;
    /* Y para que no ocupen lugar a lo ancho */
    width: 0;
    overflow: hidden;
    padding: 5px 0;
    margin: 0;
  }
}
<nav id="navbar">
  <a href="#">Home</a>
  <a href="#">Productos</a>
  <a href="#">Log In</a>
  <a href="#">About Us</a>
  <a href="#">Contactanos</a>
</nav>


Referencia:

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.