Align navbar toggle button to the right

Question

I'm having a play around with Bootstrap 4, more specifically the navbar menu. Is there is a way I can make the little navbar toggle button align to the right of the page rather than have it floating to the left next to the logo?

This is my current code.

@media (min-width: 992px) {
    .navbar-nav li a { line-height: 85px; }
}

@media (max-width: 991px) {
    .navbar-brand { float: none; }
}

.navbar-toggler{
    border:none;
    width:1em;
}

 <nav class="navbar navbar-light bg-faded navbar-full">
          <a class="navbar-brand" href="#"><img class="img-fluid" src="img/logoMedium.png" /></a>
          <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
          <div class="collapse navbar-toggleable-md" id="navbarResponsive">
              <ul class="nav navbar-nav">
                  <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">About Us</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Solar Power</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">No Obligation Quote</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Contact Us</a>
                  </li>
              </ul>
          </div>
      </nav>

Thanks for the help :)

Answer 1

Use .float-xs-right class:

<button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>

Or add float: right; to .navbar-toggler as the below snippet:

Note that pull-right has been removed in v4.

@media (min-width: 992px) {
  .navbar-nav li a {
    line-height: 85px;
  }
}
@media (max-width: 991px) {
  .navbar-brand {
    float: none;
  }
}
.navbar-toggler {
  border: none;
  width: 1em;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light bg-faded navbar-full">
  <a class="navbar-brand" href="#">
    <img class="img-fluid" src="img/logoMedium.png" />
  </a>
  <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
  <div class="collapse navbar-toggleable-md" id="navbarResponsive">
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Solar Power</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">No Obligation Quote</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

Answer 2

This is how I solved this:

<header>
    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
        <a class="navbar-brand" href="#">Fixed top</a>
        <button type="button" class="navbar-toggler hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
        <div class="clearfix"></div>
        <div class="collapse navbar-toggleable-xs" id="navbarResponsive">
            <ul class="nav navbar-nav">
                <li class="nav-item active">
                    <a href="#" class="nav-link">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Planets</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">Spaceships</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</header>

Note that you have to use the clearfix, because otherwise the float from the button would do funky things to the menu while it's collapsing.

Answer 3

This is what works for me in Bootstrap 4

<button type="button" class="navbar-toggler navbar-toggler-right"
        data-toggle="collapse" data-target=".navbar-collapse"
        aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">

or even simpler from Bootstrap docs

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

Answer 4

Just use navbar-expand-lg and your problem will going to solve.

It should look like this:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

Answer 5

I couldn't get any of the above solutions to work. So this simple hack does the job:

HTML:

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <div class="container-fluid">
    <div class="row d-inline">
      <div class="col">
        <a class="navbar-brand" href="{% url 'home' %}">
          <img src="{% static  'img/logo.png' %}" alt="Logo" height="100" class="d-inline-block">
          <span class="fs-2">Abstract Spacecraft</span>
        </a>
      </div>
      <div class="col">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" 
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="as-navbar-toggler">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </div>

CSS:

#as-navbar-toggler {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 35px;
    padding: 0px;
}

Result (in Chrome's iPhone5 screen emulator):

What's nice about this is because there's 0 padding, it rides nicely over the default (centered) page title.

Answer 6

try this piece of code:

    .navbar-toggler {  
  margin-left: 90% !important;
}

Answer 7

 .navbar-light .navbar-nav .nav-link {
    color: rgb(255, 255, 255) !important;
}
.navbar {
    
    display: block !important;
        min-height: 54px;
    }
    .pull-right{
    float:right !important;
    }

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
       <nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: #de7a22 !important;">
           
            <button class="navbar-toggler pull-right" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#"><i class="fa fa-home"></i><span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a></li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Gallery</a></li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Services</a></li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Sponsorship</a></li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact us</a></li>
                  
                </ul>

            </div>

        </nav>
        </body>

Answer 8

You have to align it just like another button tag, first wrap it inside a container to be able to move it later, after that create a div with .text-right class and then put your toggle button inside. See the example below.

<div class='container'>
   <div class='text-right'>
      <button> Button1 </button>
   </div>    
</div>

or

<div class='container text-right'>       
   <button> Button1 </button>       
</div>enter code here

Both solutions work perfectly in Bootstrap 4.5

Answer 9

Put the class pull-right and you'll get the result that you're looking for.

<button class="navbar-toggler hidden-lg-up pull-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>

or you can define a style with the following parameters:

float: right !important;

Answer 10

In bootstrap 5 you can just do this : add the class 'ms-auto' and your toggler will shift from left to right

<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

Answer 11

just add the class ml-auto to your toggle button in that way you make margin-left:auto

<button type="button" class="navbar-toggler ml-auto hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>