How Move 'nav' Element Under 'navbar-brand' In My Navbar

I using Bootstrap 4 and I set navbar-brand to the center and all elements to the right side. I want to set my nav element below navbar-brand. Also, I want to set 'login' and 'log

Solution 1:

To right align the login, you'd use ml-auto to auto fill the left side, which will push the links to the right.

Option 1:

Then adjust the min-height of the navbar. Use align-items-end to push the links to the bottom, and align the brand on top as desired. This will give the appearance of 2 Navbar rows.

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

<navclass="navbar navbar-expand-sm navbar-dark bg-dark"><ahref="#"class="navbar-brand">Academind</a><buttonclass="navbar-toggler"data-toggle="collapse"data-target="#navbarMenu"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse align-self-end"id="navbarMenu"><ulclass="navbar-nav"><liclass="nav-item"><ahref="#"class="nav-link">Users</a></li><liclass="nav-item"><ahref="#"class="nav-link">Products</a></li></ul><ulclass="navbar-nav ml-auto"><liclass="nav-item "><ahref="#"class="nav-link">Login</a></li><liclass="nav-item"><ahref="#"class="nav-link">Log out</a></li></ul></div></nav>

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

Option 2: (remove extra CSS)

Simply apply flex-column to the navbar, and wrap the brand and toggler together in one flexbox div. Use the auto margin utils to center the brand.

<navclass="navbar navbar-expand-sm navbar-dark bg-dark flex-column align-items-stretch"><divclass="d-flex"><ahref="#"class="navbar-brand mx-sm-auto mr-auto">Academind</a><buttonclass="navbar-toggler"data-toggle="collapse"data-target="#navbarMenu"><spanclass="navbar-toggler-icon"></span></button></div><divclass="collapse navbar-collapse w-100"id="navbarMenu"><ulclass="navbar-nav"><liclass="nav-item"><ahref="#"class="nav-link">Users</a></li><liclass="nav-item"><ahref="#"class="nav-link">Products</a></li></ul><ulclass="navbar-nav ml-auto"><liclass="nav-item"><ahref="#"class="nav-link">Login</a></li><liclass="nav-item"><ahref="#"class="nav-link">Logout</a></li></ul></div></nav>

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

---

Related: How can I have Brand and Navbar on separate lines?

Solution 2:

you can use bootstrap4 class d-flex, without any extra CSS:

<navclass="navbar navbar-expand-sm navbar-dark bg-dark"><divclass="w-100 d-flex flex-column"><divclass="w-100 d-flex justify-content-center align-items-center"><ahref="#"class="navbar-brand">Academind</a><buttonclass="navbar-toggler ml-auto"data-toggle="collapse"data-target="#navbarMenu"><spanclass="navbar-toggler-icon"></span></button></div><divclass="collapse navbar-collapse"id="navbarMenu"><ulclass="navbar-nav mr-auto"><liclass="nav-item "><ahref="#"class="nav-link">Users</a></li><liclass="nav-item"><ahref="#"class="nav-link">Products</a></li></ul><ulclass="navbar-nav  ml-auto"><liclass="nav-item "><ahref="#"class="nav-link">Login</a></li><liclass="nav-item"><ahref="#"class="nav-link">Logout</a></li></ul></div></div></nav>

Demo: https://jsfiddle.net/PouyaAk/1m2pLn9j/18/