Bootstrap 4 navbar right align with button that doesn't collapse on mobile
Question
I am trying to have 3 elements on a navbar. A left aligned brand, a right aligned group of links that collapse on mobile, and an additional button that is also right aligned like the links, but should not collapse with them.
To right align the button and links I wrapped them in ml-auto div. This works great on mobile (1st image), but on PC the button appears above the links (2nd image). I tried to add btn-group to the div which sort of works, but the button merges with links and it looks odd (3rd image).
How can I properly align these components horizontally?
Please note that I do not want the button to be in the same group with the other right links. I want the button to be always visible even on a small screen. I've seen a few similar questions on SO, but they all have the right aligned items in the same, collapsible group which is no good for me.
You can paste the code below to w3school TryIt editor
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Home</a>
<div class="ml-auto">
<button class="btn btn-success">My Button</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"/>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 2</a>
</li>
</ul>
</div>
</nav>
4 answers
solution1
2 2018-08-15 09:44:29
I have found the solution finally. The trick is to use the grid system properly. Modify the col classes as per your requirement for responsiveness (in navbar collapse part) Also the button and collapse are not part of the same group just as you wanted, as wrapping it in the same div will cause the collapse to not work correctly on mobile screens. Hope it helps you..
body { padding-top: 105px; } .collapse{ justify-content:flex-end; } .text-nowrap { white-space: nowrap; }
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"> <div class="container"> <a href="index.html" class="navbar-brand"> <h3 class="d-inline align-middle text-white"> Brand </h3> </a> <button id="myButton" class="btn btn-success ml-auto mr-2"> My button </button> <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarNav" class="col-md-3 col-lg-2 collapse navbar-collapse ml-5"> <ul class="navbar-nav "> <li class="nav-item"> <a href="#home" class="nav-link"><span class="text-nowrap">Right Link 1 </span></a> </li> <li class="nav-item"> <a href="#about" class="nav-link"><span class="text-nowrap">Right Link 2 </span></a> </li> </ul> </div> </div> </nav> <section> <div class="text-center"> <p>hello this is teadsfadsf adsfadfs adfsasdfadf adsf adsf asdf adsf asdf adsf a adfs ads f asd fadfs adfs ads fds fdfs asdfadsxt</p> </div> </section> </body> </html>
solution2
2 ACCPTED 2018-08-15 12:54:32
None of the existing answers work and require complicated hacks that aren't correct use of the Bootstrap 4 Navbar. The Navbar in these answers doesn't display properly on mobile. The .row is only meant to contain grid columns , and the grid isn't supported Navbar content
The anwer is simple . The only adjustment you need is to disable the flex-grow (using flex-grow-0 ) that is used on the navbar-collapse . This allows the ml-auto to push the button to the right.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
<a class="navbar-brand" href="#">Home</a>
<button class="btn btn-success ml-auto">My Button</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
<ul class="navbar-nav text-right">
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 2</a>
</li>
</ul>
</div>
</nav>
Additionally add text-right to the navbar-nav if you want the links right on mobile.
Demo: https://www.codeply.com/go/ljI9F6aRLk
solution3
1 2018-08-15 03:50:07
I modify your code. Try to view this one on a fullpage and resize accordingly:
I add d-sm-none class on the 1st button, I add justify-content-end class on your nav collapse then create another button <button class="btn btn-success d-none d-sm-block">My Button</button> to be part of your nav collapse and display none once it goes on other sizes except sm.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Home</a> <div class="ml-auto"> <button class="btn btn-success d-sm-none">My Button</button> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <button class="btn btn-success d-none d-sm-block">My Button</button> <ul class="navbar-nav ml-auto "> <li class="nav-item active"> <a class="nav-link" href="#">Right Link 1</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Right Link 2</a> </li> </ul> </div> </nav> <br> <div class="container"> <h3>Navbar Forms</h3> <p>Use the .form-inline class to align form elements side by side inside the navbar.</p> </div> </body> </html>
solution4
0 2018-08-15 08:29:30
Figured it out. Adding "row" to div makes them stack horizontally. Although, that caused some funny behavior when the collapsed button is pressed. It would shift towards to middle. Adding more left margin auto fixed that.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Home</a>
<div class="row ml-auto">
<button class="btn btn-success ml-auto">My Button</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" />
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 2</a>
</li>
</ul>
</div>
</div>
</nav>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.