twitter bootstrap - vertical - Bootstrap 4 Navbar alinea el centro del logotipo y el ícono de alternar a la izquierda

navbar-right bootstrap 4 (2)

Bootstrap 4 Navbar usa flexbox, por lo que es posible lograrlo sin CSS adicional . Necesitará un div espaciador vacío para mantener el logotipo centrado.

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> <div class="d-flex w-100 order-0"> <div class="w-100"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> </div> <a class="navbar-brand text-center w-100" href="#">Navbar</a> <span class="w-100"></span> </div> <span class="w-100"></span> </nav>

Toggler izquierda, centro de la marca:
https://www.codeply.com/go/VfuMAtIoXi

Relacionado:
¿Cómo centrar los elementos de navegación en Bootstrap?
Bootstrap NavBar con elementos alineados a la izquierda, al centro o a la derecha

Quiero centrar el logotipo y los enlaces en el lado izquierdo de la barra de navegación y cuando se colapsan en dispositivos pequeños, el botón de alternar debe aparecer en el lado izquierdo, aquí aparece en el lado derecho y el logotipo debe estar fijo (sin colapso)

<nav class="navbar navbar-expand-sm navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav>

Claro, lo siento, debería haberlo agregado antes. Básicamente, lo que estamos haciendo es mover la marca .navbar al medio dándole el parámetro de 0 auto, y ajustar el .navbar-collapse (por lo tanto, los elementos de nuestro menú) a la izquierda, dando un espacio de 10px desde la parte superior de la nav Luego, con una consulta de medios, que comenzará a funcionar solo a 767px, cetralizaremos la marca .navbar, por lo que siempre estará en el medio, ahora ajustaremos .navbar-toggler (icono del menú) como lo hicimos con la tecla elementos del menú, que ahora están obteniendo la posición predeterminada, dándoles el siguiente estilo: posición: heredar; Luego también modifiqué la clase navbar-expand-sm a navbar-expand-md para cambiar el punto de interrupción.

.navbar-brand { margin: 0 auto; } .navbar-collapse { position: absolute; top: 10px; } @media (max-width: 767px) { .navbar-brand { text-align: center; } .navbar-toggler { position: absolute; top: 10px; } .navbar-collapse { position: inherit; } }