1

Quiero hacer una barra de navegación de dos columnas, lo que hice fue hacer dos navs dentro del mismo div "container" y eso por ahora me funcionó, el segundo nav se alineó tal cual quiero. Pero el primero, el de arriba, se alinean los iconos a la izquierda como quiero, pero el logo no logro llevarlo al centro.

Imagen1: Es como deseo que quede

Imagen2: El logo se queda en la derecha y no se centra.

Necesito una ayuda con esto por favor. Gracias

Así quiero que quede

Así es como lo tengo según el código que coloqué

<div class="container-fluid">
        <nav class="navbar navbar-expand-lg navbar-light bg-dark">
            <a class="nav-item nav-link" href="#"><img src="/assets/logo.svg" width="200"></a>
                <div class="d-flex">
                <button class="navbar-toggler justify-content-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                
                </div>
                
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <div class="navbar-nav ms-auto barraIcons">
                        <a class="nav-item nav-link" href="#"><img class="icon1" alt="" width="30" height="24"></a>
                        <a class="nav-item nav-link " href="#"><img class="icon2" alt="" width="30" height="24"></a>
                        <a class="nav-item nav-link " href="#"><img class="icon3" alt="" width="30" height="24"></a>
                    </div>
                  </div>
        </nav>

        <nav class="navbar navbar-expand-lg navbar-light bg-light d-flex">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <div class="navbar-nav w-100 justify-content-evenly">
                  <a class="nav-item nav-link active" href="#">SALE</a>
                  <a class="nav-item nav-link" href="#">E-SHOP</a>
                  <a class="nav-item nav-link" href="#">LOOKBOOK</a>
                  <a class="nav-item nav-link" href="#">CAMPAÑA</a>
                  <a class="nav-item nav-link" href="#">LOCALES</a>
                </div>
              </div>
         </nav>
      </div>

2
  • ¿Qué versión de Bootstrap estás utilizando?
    – padaleiana
    Commented el 18 mar. 2021 a las 0:50
  • Estoy usando Bootstrap 5
    – Caro S.
    Commented el 18 mar. 2021 a las 1:02

1 respuesta 1

1

Lo solucioné usando la clase start-50 que es el equivalente a left:50% y cambiando la posición a absolute, también añadí la clase px-0 al contenedor para eliminar los bordes y que la barra ocupe todo el ancho de la pantalla, y añadí la clase navbar-brand al div que contiene el logo como se recomienda en la documentación oficial de Bootstrap.

<!-- Bootstrap 5 css -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div class="container-fluid px-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-dark">
        <div class="navbar-brand d-flex align-items-center">
            <a class="nav-link position-absolute start-50" href="#"><img src="/assets/logo.svg" width="200"></a>
        </div>
        <div class="d-flex">
            <button class="navbar-toggler justify-content-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-nav ms-auto barraIcons">
                <a class="nav-item nav-link" href="#"><img class="icon1" alt="" width="30" height="24"></a>
                <a class="nav-item nav-link " href="#"><img class="icon2" alt="" width="30" height="24"></a>
                <a class="nav-item nav-link " href="#"><img class="icon3" alt="" width="30" height="24"></a>
            </div>
        </div>
    </nav>

    <nav class="navbar navbar-expand-lg navbar-light bg-light d-flex">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-nav w-100 justify-content-evenly">
                <a class="nav-item nav-link active" href="#">SALE</a>
                <a class="nav-item nav-link" href="#">E-SHOP</a>
                <a class="nav-item nav-link" href="#">LOOKBOOK</a>
                <a class="nav-item nav-link" href="#">CAMPAÑA</a>
                <a class="nav-item nav-link" href="#">LOCALES</a>
            </div>
        </div>
    </nav>
</div><!--//container-fluid-->

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.