Boostrap - Dropdown menu in pulled-right navbar section displays panel arrow on the left

css, twitter-bootstrap

Solution

Just for completeness, the solution was to add the `pull-right` class to the parent UL, like this:

<ul class="nav pull-right">
   ... your links here
   <li class="dropdown">your dropdown item</li>
</ul>

Problem

I'm using bootstrap, trying to create a Facebook like top navbar for an ecommerce. I'm adding a dropdown to the far right top link, so the link "Account" shows a dropdown for account related actions. The dropdown menu is nicely aligned right, but the little arrow that appears on top of the menu panel is left aligned, pointing to a previous link in the navbar. To see it, please see this fiddle (fullscreen to stop the navbar from collapsing): http://jsfiddle.net/v3wgt/1/embedded/result/ And the code here: http://jsfiddle.net/v3wgt/2/ Is there any fix / workaround / alternative to this?

Original source