Skip to main content
se añadieron 241 caracteres en el cuerpo; etiquetas editadas
Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70

estoyEstoy 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?

     <a href="#">Home</a>
     <a href="#">Productos</a>
     <a href="#">Log In</a>
     <a href="#">About Us</a>
     <a href="#">Contactanos</a>
    </nav>


#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;

}

}

#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>

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?

     <a href="#">Home</a>
     <a href="#">Productos</a>
     <a href="#">Log In</a>
     <a href="#">About Us</a>
     <a href="#">Contactanos</a>
    </nav>


#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;

}

}

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>

Origen Enlace
Sanwych
  • 185
  • 1
  • 12

Mantener tamaño del elemento al ser afectado por un media query

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?

     <a href="#">Home</a>
     <a href="#">Productos</a>
     <a href="#">Log In</a>
     <a href="#">About Us</a>
     <a href="#">Contactanos</a>
    </nav>


#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;

}

}