Twitter Bootstrap Navigation Bar - Right Align Dropdown Menu

Question

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?

Answer 1

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.

Answer 2

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>