Bootstrap 4 navbar right align with button that doesn't collapse on mobile

1
votes

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).

navbar on mobile, desktop and button group

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
htmlcssbootstrap-4

4 Answers

4
votes

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

enter image description here

enter image description here

Also see: Bootstrap 4 - Navbar items outside the collapse

2
votes

I modify your code. Try to view this one on a fullpage and resize accordingly:

I add d-sm-noneclass 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>
2
votes

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>
0
votes

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>