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?

Recommended Answers

All 10 Replies

Member Avatar for 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

c900f166935634fe995e2fe9985a84c3

Breakpoint

90f1d9b5cbdefc7868fcf521d8491b3d

Expand menu in breakpoint

d04688d4aeb1c9e2fd4a6bf2b68d90db

commented: sorry i completely mis-read the op's questions +14

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

style="float:right;"
Member Avatar for 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"

Thanks for all your help

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

Member Avatar for diafol

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

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

thanks it helped me

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.