Cómo mover el elemento ‘nav’ debajo de ‘navbar-brand’ en mi Navbar

Utilizando Bootstrap 4 y navbar-brand en el centro y todos los elementos en el lado derecho. Quiero establecer mi elemento de nav por debajo navbar-brand . introduzca la descripción de la imagen aquí

Además, quiero configurar “iniciar sesión” y “cerrar sesión” en el lado derecho de la nav , pero el uso de mr-auto no funciona.

html:

  

css:

 @media (min-width: 768px) { .navbar-brand { position: absolute; left: 50%; transform: translateX(-50%); } } 

Para alinear a la derecha el inicio de sesión, usaría ml-auto para llenar automáticamente el lado izquierdo , lo que empujará los enlaces a la derecha .

introduzca la descripción de la imagen aquí

Opción 1:

A continuación, ajuste la min-height de la barra de navegación. Use align-items-end para empujar los enlaces a la parte inferior y alinee la marca en la parte superior como desee. Esto dará la apariencia de 2 filas de la barra de navegación.

 @media (min-width: 567px) { .navbar-brand { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); } .navbar { min-height: 90px; } }  

https://www.codeply.com/go/07ibCvkQJi

Opción 2: (eliminar CSS extra)

Simplemente aplique flex-column a la navbar , y envuelva la marca y el interruptor juntos en una div flexbox. Usa las utilidades de margen automático para centrar la marca.

  

https://www.codeply.com/go/qVJPhAy6fS


Relacionado: ¿Cómo puedo tener Brand y Navbar en líneas separadas?

puede usar bootstrap4 class d-flex , sin ningún CSS adicional:

  

Demostración: https://jsfiddle.net/PouyaAk/1m2pLn9j/18/