Bootstrap 4: Justify menu to right in navbar?

Question

I am working with the Bootstrap 4 default navbar and I just want to add a collapsing menu that is positioned on the right, not the left, when not collapsed.

I have tried adding text-right and float-right, but neither are actually moving the menu to the right.

Here is a bootply showing the issue.

Here also is a snippet, since StackOverflow wants me to use one, though I don't think it'll be wide enough to show the non-collapsed menu:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">&#x2630;</button>
        <div class="collapse navbar-collapse float-right">
            <ul class="nav navbar-nav">
                <li class="active nav-item"><a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item"><a href="#about" class="nav-link">About</a>
                </li>
                <li class="nav-item"><a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Yousaf · Accepted Answer · 2019-01-28T11:18:53.080

1

Add ml-auto class to ul tag containing menu

<ul class="nav navbar-nav ml-auto">
   <li class="active nav-item">
      <a href="#" class="nav-link">Homes</a>
   </li>
   <li class="nav-item">
      <a href="#about" class="nav-link">About</a>
   </li>
   <li class="nav-item">
      <a href="#contact" class="nav-link">Contact</a>
   </li>
</ul>

edited Jan 28 '19 at 11:18

answered Jan 28 '19 at 11:12

Yousaf

27,861
6
44
69

Siavas · Answer 2 · 2019-01-28T11:21:38.310

The element .collapse.navbar-collapse requires .justify-content-end class as it is positioned with flex (display: flex) and takes full remaining width of your navbar.

The other answers with .ml-auto are perfectly valid. The difference between these two is that .justify-content-end will make all elements inside navbar-collapse stick to the right, whereas .ml-auto will only do the same for the ones inserted after your ul.nav.nav-bar, so the ones on the left can still stick to the left. You can choose the one most appropriate to you, and feel free to combine these two for more sophisticated layouts.

Your updated Boolply can be found here.

<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
        <div class="collapse navbar-collapse justify-content-end">
            <ul class="nav navbar-nav">
                <li class="active nav-item"><a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item"><a href="#about" class="nav-link">About</a>
                </li>
                <li class="nav-item"><a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

score -1 · Answer 3 · answered Jan 28 '19 at 11:24

add .navbar-expand-md .navbar-collapse{ flex-direction: column-reverse;} in your style sheet. thanks

.navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
    <div class="container">
        <a class="navbar-brand" href="#">Brand</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">&#x2630;</button>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav  ml-auto"> <!-- here -->
                <li class="active nav-item"><a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item"><a href="#about" class="nav-link">About</a>
                </li>
                <li class="nav-item"><a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Bootstrap 4: Justify menu to right in navbar?

3 Answers3

Linked