0

Es posible tener la barra de navegación en lado izquierdo, pero al hacer la pantalla más pequeña se vaya para la derecha y se alineara con el logo?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<header class="site-header inicio">
  <div class="container h-100 contenedor">
    <div class="row align-items-center justify-content-between">
      <div class="col-12 col-md-6">
        <a href="/"><img src="img/logo.svg" alt="Logotipo"></a>
      </div>
      <div class="col-12 col-md-6 nav-top">
        <ul class="nav justify-content-end">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row h-100 pb-5 d-flex align-items-end">
      <h1>Venta de Casas & Departamentos Exclusivos de Lujo</h1>
    </div>
  </div>
</header>

3
  • Corrige el post, pero si, se puede en el CSS haciendo uso de media query - link
    – Excorpion
    Commented el 10 nov. 2020 a las 21:21
  • No utilices el tamaño de letra grande, parece que estuvieras gritando.
    – Bicho
    Commented el 10 nov. 2020 a las 21:23
  • @Bicho el problema con la letra grande es porque solo pegó el código HTML y por ello se veía así. Commented el 10 nov. 2020 a las 22:26

1 respuesta 1

1

Como estás usando flexbox, para cambiar la posición de los enlaces solo usa:

.nav-top {order: -1} /* izquierda */
.nav-top {order: 1} /* derecha */

Tu verás en que parte de tus media query aplicas el código css.

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.