Bootstrap 4 Navbar align right

Question

I am working on a navbar template from Bootstrap 4 website but I'm having a problem regarding the posistion of the collapse nav items. Originally, toggle button is placed on the left side of the navbar as well as the list items.

But I want them to on the right side of the page, so I inserted a float-xs-right class on the button and nav items. Then if I click the toggle button, the collapse items are not positioned properly. As you can see on the screenshot.

Navbar screenshot

I want the collapse items to be positioned below and on the left side.

Btw, here's my code:

<nav class="navbar navbar-light bg-faded">
 <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
 <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>

 <div class="collapse navbar-toggleable-md" id="main-navbar">
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Bio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Gallery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Awards</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">More info</a>
    </li>
  </ul>
 </div>
</nav>

Also, here's my codepen for this navbar:

http://codepen.io/marcvs/pen/PGvqBO

Thank you in advance.

Solution 1

For Bootstrap 4 Alpha 6 / Beta: Bootstrap 4 align navbar item to the right

This is the proper way to do it. You want to float the menu left by default. Float the button right (float-xs-right) on everything but it can't be seen (hidden-lg-up) and then float-lg-right the ul for it to work like you want.

See this codepen:

http://codepen.io/anon/pen/mAYAKd?editors=1100

It works fine.

Note this added CSS:

@media screen and (max-width: 992px){
  #main-navbar {
      clear: both;
  }
}

HTML:

  <nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
    <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>

    <div class="collapse navbar-toggleable-md" id="main-navbar">
      <ul class="nav navbar-nav float-lg-right">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Bio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Details</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Awards</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">More info</a>
        </li>
      </ul>
    </div>
  </nav>

Solution 2

Hello See the below example.Though I did It in another way but Hope you are looking for this.

 <nav class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data- 
   target="#navbar-collapse-1">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   </button>
   &nbsp;   
    </div>
   <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
   <div class="collapse navbar-collapse" id="navbar-collapse-1">     
   <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Bio</a></li>
    <li><a href="#">Details</a></li>
     <li><a href="#">Award</a></li>
    <li><a href="#">More info</a></li>

    </ul>
   </div>
   </nav>

See The Fiddle NavBar Fiddle Demo

Hope It Helps.

Comments

[Zim]

As of BS 4 alpha 6, the navbar is now flexbox and the solution for this has changed: stackoverflow.com/a/41513784/171456

[Zim]

Since the navbar in BS4 alpha 6 is now flexbox, the extra CSS is no longer needed to stack the items, and ml-auto is used to right align the menu items. stackoverflow.com/a/41513784/171456