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

Solution 1

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>

Solution 2

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>

Solution 3

try this piece of code:

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

Solution 4

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;

View more solutions

Comments

[user3599852]

Could you please be more specific about which tag I should add it too, because I have tried the pull-right tag with no luck.

[Dan]

Please, take a look.

[user3599852]

Thanks for the help Dan, however I have tried it and its done nothing.

[Juan Pablo Rinaldi]

.pull-right and .pull-left have been removed from Bootstrap 4: v4-alpha.getbootstrap.com/migration/#utilities

[Alex M]

Some explanation of your solution would be helpful.

[Daniel Donnelly]

I think if the logo were small, the navbar toggle button would collide with the title. I'm really a bootstrap newbie, and am looking for any suggestions on my code, as well.