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>