CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user982124
user982124

Reputation: 4610

Twitter Bootstrap Navigation Bar - Right Align Dropdown Menu

I'm using the Twitter Bootstrap (v2.1.1) with a PHP site. I'm generating the navigation bar dynamically in a php script as the navigation bar will have different content if the user is logged in or out of the site.

I would like to align the last dropdown menu to the right of the screen but haven't been able to so far. Here's a jsFiddle showing a simplified version:

http://jsfiddle.net/fmdataweb/AUgEA/

I would like the Menu 2 drop down to be right aligned. The code the for last dropdown is the same as for other dropdowns:

<li class="dropdown pull-right">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="propertiesSearch.php">Logout</a></li>
</ul>
</li>

I've tried chaging it to:

<li class="dropdown pull-right">

but that makes no difference. Anyone know how to pull the dropdown menu to the right like you can with forms and <p> text?

Upvotes: 36

Views: 87822

Answers (4)

jbmilgrom
jbmilgrom

Reputation: 23201

If you came here trying to right-align a regular bootstrap .dropdown-menu and NOT a .nav, and are using Bootstrap 3, the correct class to add is .dropdown-menu-right

Here's the bootstrap documentation:

<ul class="dropdown-menu dropdown-menu-right">
  ...
</ul>

Upvotes: 18

Ajoy
Ajoy

Reputation: 1848

For those using Bootstrap 3, .navbar-right would do the trick.

For eg.,

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

Upvotes: 14

Caio Tarifa
Caio Tarifa

Reputation: 6043

You need to change the .pull-right class to ul element instead of li.

HTML

<ul class="nav pull-right">
  <li class="dropdown">
    <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
      Menu 2
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="propertiesSearch.php">Logout</a></li>
    </ul>
  </li>
</ul>

Version 2.1.1

I rewrote your code including only necessary JavaScript plugins (bootstrap-dropdown.js), the latest version of Twitter Bootstrap (2.1.1) and support for responsive design.

http://jsfiddle.net/caio/gvw7j/

If you see the responsive menu in the above link, you can see the "wide result" in this link:

http://jsfiddle.net/caio/gvw7j/embedded/result/

.pull-right is defined by:

.pull-right {
  float: right !important;
}

Version 3.1.1

There were no changes in this class. You might see the helpers classes section.

However, the documentation recommends using the class .navbar-right because it has some specific optimizations, unlike the pull-right class.

Upvotes: 78

Andres I Perez
Andres I Perez

Reputation: 75379

Instead of pulling the li element to the left, simply contain that element which you wish to be right aligned within its own ul list and pull that instead like so:

HTML

<ul class="nav pull-right">
    <li class="dropdown">
        <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="propertiesSearch.php">Logout</a></li>
        </ul>
    </li>    
</ul>

Demo: http://jsfiddle.net/AUgEA/1/

Upvotes: 11

Related Questions