1

Al reducir el tamaño de la pantalla, me desaparece la navbar por completo y necesito que se haga responsive.

 <div class="container">
 <div class="header-container header">
            <a class="navbar-brand logo" href="#"> <img class="logo" src="assets/images/logo".png" /> </a>
            <div class="header-right">
                <a class="navbar-item" href="#about">Nosotros</a>
                <a class="navbar-item" href="#calidad">Calidad</a>
                <a class="navbar-item" href="#products">Productos</a>
                <a class="navbar-item" href="#contact">Contacto</a>
            </div>
        </div>
 </div>

css:

.header-right {
display: none;

display: block;
float: right;
padding: 6px 20px;

}

.navbar-item {
color: #ffffff;
padding: 10px;
}

.navbar-item:hover {
color: #58d5f7;
text-decoration: none;
}
2
  • No se entiende tu duda, por favor se mas descriptivo
    – BetaM
    el 11 abr. 2020 a las 19:23
  • @BetaM listo ya la edite el 11 abr. 2020 a las 19:38

1 respuesta 1

0

Tienes los siguientes errores:

  • Tienes una instrucción que lo pretende mostrar como bloque, pero viene precedida por otra que indica que no se muestre (esto no tiene mucha razón de ser)
  • Quitale ese color blanco a la fuente hace difícil que notes lo que ocurre por al momento con el ejemplo puesto empata con el color de la ventana y se pierde
  • Aunque no es un error perse estás haciendo que los elementos sean flotantes, considero que será mucho mas simple apoyarte de flexbox

Propongo

En escencia es el mismo resultado pero realicé los siguientes cambios:

  • Cambié las etiquetas de maquetación por las que tienen mayor relación semántica con un menú de navegación
  • Re escribí las clases usadas para darles mejor manejo y que denoten el agrupamiento de elementos
  • Para lograr que los elementos del menú reaccionen a un acomodo distinto hice:
    • Establecí una media query
    • Dentro de la media query invoco por medio de su clase al contenedor de los elementos li y le indico que ahora los elementos queden apilados uno sobre otro

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        display: flex;
        width: 100vw;
      }
      .container-item {
        flex: auto;
        border: 1px solid;
        text-align: center;
      }
      
      @media screen and (max-width: 501px) {
        .container {
          flex-direction: column;
        }
      }
    </style>
    <nav>
      <ul class="container">
        <a class="container-item" href="#"> 
          <img class="container-item__logo" src="assets/images/logo.png" /> 
        </a>
        <a class="container-item" href="#about">Nosotros</a>
        <a class="container-item" href="#calidad">Calidad</a>
        <a class="container-item" href="#products">Productos</a>
        <a class="container-item" href="#contact">Contacto</a>
      </ul>
    </nav>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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