22

I need a complete right-aligned navbar in bootstrap but the problem is my brand is in the left side but I need it to go to right side. Although I can put other list items using navbar-right option to the right side.

  <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
          <a class="navbar-brand pull-right" href="#">CesaStack</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                      <li class="divider"></li>
                      <li><a href="#">One more separated link</a></li>
                  </ul>
              </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">بیاب</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                  </ul>
              </li>
          </ul>
      </div><!-- /.navbar-collapse -->
  </nav>
1
  • He is using boostrap version 4 In the boostrap version 4, the class is pull-right. Dec 11, 2016 at 1:48

4 Answers 4

35

Move the brand above the navbar-header and give it the class navbar-right.

This puts your brand on right when in desktop views, and it goes left in mobile views, properly keeping the menu button as the rightmost element.

http://jsfiddle.net/KHtU4/

<nav class="navbar navbar-default" role="navigation">
  <a class="navbar-brand navbar-right" href="#">CesaStack</a>
  <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>          
  </div>

  <div class="collapse navbar-collapse">
      <!-- snip -->
  </div>
</nav>
3
  • Suppose I want brand on right side in both desktop and mobile view... Moreover navbar-header i want on left side in both views. please suggest ans Dec 12, 2014 at 9:02
  • link appears to be broken Mar 10, 2016 at 20:04
  • link should be fixed now
    – friggle
    Mar 16, 2016 at 18:13
9

The brand is on the left side, even though it has the class .pull-right, because it is contained in

<div class="navbar-header">
   ..
   <a class="navbar-brand pull-right" href="#">CesaStack</a>
</div>

if you place it outside, just after .navbar-header-></div>, then it will be aligned to the right as it should.

See your code in this fiddle -> http://jsfiddle.net/9BfjX/

3
  • This doesn't look right in mobile views. In the older bootstrap, you could put the brand on the right so that in desktop, it would go [menu items][brand], and in mobile, it would be [brand][menu button]. This method causes the brand to go to a new row underneath the menu button.
    – friggle
    Mar 19, 2014 at 14:03
  • @friggle, you mean mobile with bootstrap 3.x? Mar 19, 2014 at 15:46
  • 2
    Sorry, I don't know what I was trying to say when I typed my above comment. Using the method you've given, when the navbar collapses, the brand will be on another row below the navbar-toggle. Just look in your fiddle. Look at the fiddle in my answer to see the difference.
    – friggle
    Mar 19, 2014 at 18:29
7

What you need to use is navbar-right not pull-right

 <div class="navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          **LOGO OR HEADER NAME HERE**

        </div>
        <div class="navbar-collapse navbar-right collapse">

          **OTHER MENU OR FORM HERE**

        </div><!--/.navbar-collapse -->
    </div>
-2
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">right</a></li>
        <li><a href="#">right</a></li>
      <li><a href="#">right</a></li>
    </ul>

  </div>
</nav>
2
  • 3
    You should add at least a comment explaining your solution. Mar 27, 2017 at 19:49
  • @NicolasHenneaux add navbar-right class in ul tag move menu right side add navbar-left class in ul tag move menu left side Mar 28, 2017 at 6:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.