0
276
Views¿Cómo mantengo el menú de hamburguesas en el centro?
cuando muestro el menú va a la derecha y desplaza el perfil de usuario. Necesito que el menú esté siempre en el centro y el perfil siempre a la derecha.
Estoy usando angular 12 y bootstrap 5.
Abajo les dejo el codigo que estoy usando y unas imagenes de como debe quedar
¡Gracias!
apilar enlaces
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" > <div class="container-fluid"> <a class="navbar-brand" ><img src="../../../assets/Targaryen.ico" /></a> <button class="navbar-toggler justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerbur" aria-controls="navbarTogglerbur" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-center" id="navbarTogglerbur"> <ul class="navbar-nav justify-content-center mt-lg-0"> <li class="nav-item"> </li> <li class="nav-item"> </li> <li class="nav-item"> </li> <li class="nav-item"> </li> </ul> </div> <div class="dropdown"> <img src="{{ info.photoURL }}" /> <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="dropdownMenuButton1" > <li class="dropdown-item" > </li> <li class="dropdown-item" > </li> </ul> </div> </div> </nav>
·
Santiago Trujillo
1 answers
Answer question0
Simplemente cambie el orden de navbar-nav y dropdown . Luego use order-lg-last en el menú desplegable para mantenerlo en lg...
<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand"><img src="//via.placeholder.com/30" /></a> <button class="navbar-toggler justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerbur" aria-controls="navbarTogglerbur" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="dropdown order-lg-last"> <img src="//via.placeholder.com/30" /> <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark" aria-labelledby="dropdownMenuButton1"> <li class="dropdown-item"> <a href>Item</a> </li> <li class="dropdown-item"> <a href>Item</a> </li> </ul> </div> <div class="collapse navbar-collapse justify-content-center" id="navbarTogglerbur"> <ul class="navbar-nav justify-content-center mt-lg-0"> <li class="nav-item"> <a href class="nav-link">Item</a> </li> <li class="nav-item"> <a href class="nav-link">Item</a> </li> <li class="nav-item"> <a href class="nav-link">Item</a> </li> <li class="nav-item"> <a href class="nav-link">Item</a> </li> </ul> </div> </div> </nav>
·
Santiago Trujillo
Report
Answer question