Question

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?

Answer 1

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>