Bootstrap Navbar: Align right

[fheppell]

I'v got this code to make a bootstrap navbar

<div class="navbar  navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
       <a class="brand" id="logo" href="#">picturecamel</a>
        <ul class="nav pull-left">
                <li><a href="/">Home</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="change-password">Change password</a></li>
                        <li><a href="update-email-address">Change Email</a></li>
                    </ul>
                </li>
                <li><a href="logout">Logout</a></li>
                <li><a href="help">Help</a></li>

        </ul>

      </div>
    </div>
    </div>
 </div>

I want to make the help link on the right hand side of the navbar. I've tried applying the class of pull right but that doesn't work.
Any suggestions?

[iamthwee]

Is it not in the examples?

http://twitter.github.io/bootstrap/components.html#buttonDropdowns

[diafol]

Here's a version of one I'm using:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a class="brand" href="/cy/hafan/">ARDal</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="/cy/hafan/" title="Hafan yr ardal"><i class="icon-home icon-white"></i> <span class="small-menu">Hafan</span></a></li>
          <li class=""><a href="/cy/proffil/" title="Eich proffil personol"><i class="icon-user icon-white"></i> <span class="small-menu">Proffil</span></a></li>
          <li class=""><a href="/cy/gofalwr/" title="Gwiriwch ac archebwch waith y gofalwr"><i class="icon-wrench icon-white"></i> <span class="small-menu">Gofalwr</span></a></li>
          <!-- ok you get the idea - that's the left-aligned stuff -->  
        </ul>
        <!-- now for right-aligned stuff -->
        <ul class="nav pull-right">
            <li class="active"><a href="/cy/hafan/">CY</a></li>
            <li class=""><a href="/en/hafan/">EN</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

I like to separate the language switcher from the regular nav. Also my markup is based on a variant (but should be identical to original Bootstrap) from: http://fortawesome.github.io/Font-Awesome/icons/

Here's a screen shot of the look:

Full screen

Breakpoint

Expand menu in breakpoint

[BMXDad]

It needs to be a seperate list. You could also set a style:

style="float:right;"

[diafol]

It needs to be a seperate list. You could also set a style:
style="float:right;"

THis is taken care of by the built-in:

class="nav pull-right"

[fheppell]

Thanks for all your help

[BMXDad]

Not in the same list ... you get strange behaviour on collapse.

[diafol]

Not in the same list ... you get strange behaviour on collapse.

In which browser? Are all your css/js files loaded properly?

[new user1]

thanks it helped me

[diafol]

@new_user1

Be aware that this is an old post and that Bootstrap3:

<ul class="nav navbar-nav navbar-right">

uses that. See here: http://getbootstrap.com/components/#navbar

[HAOND]

Much helpful for language switcher.
But is there a way to have different country flags icons... ?