Cómo mover el elemento 'nav' debajo de 'navbar-brand' en mi Navbar
Estoy usando Bootstrap 4 y configurénavbar-brand
al centro y todos los elementos al lado derecho. Quiero configurar minav
elemento debajo denavbar-brand
.
Además, quiero establecer "iniciar sesión" y "cerrar sesión" en el lado derecho de lanav
, pero usandomr-auto
no funciona.
html:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a href="#" class="navbar-brand">Academind</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ">
<li class="nav-item ">
<a href="#" class="nav-link">Users</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Products</a>
</li>
</ul>
<ul class="navbar-nav mr-auto ">
<li class="nav-item ">
<a href="#" class="nav-link">Login</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Log out</a>
</li>
</ul>
</div>
</nav>
css:
@media (min-width: 768px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}