0

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?

6
Contributors
10
Replies
67
Views
4 Years
Discussion Span
Last Post by HAOND
Featured Replies
  • 2
    diafol 3,669   4 Years Ago

    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 … Read More

  • 1
    diafol 3,669   2 Years Ago

    @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 Read More

2

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

Edited by diafol

Votes + Comments
sorry i completely mis-read the op's questions
0

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"
0

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

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.