6

I am having a bootstrap dropdown. It works fine, but when I am inside a page accessed through the menu, then it gets weird:

http://2.bp.blogspot.com/-vw49cpP7weo/UZw0Jh_zmhI/AAAAAAAACJc/oadR5CTIus0/s640/dropdown.png

You can see in the picture, the menu is displaced to the right.

I paste the code:

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <a 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>
        </a>
        <a class="brand" href="index.html"><i class="icon-chevron-right"></i> Zimil Ltda</a>
        <div class="nav-collapse collapse">
            <ul class="nav pull-right">
                <li><a href="index.html">Inicio</a></li>
                <li><a href="acerca.html">Quienes somos</a></li>
                <li class="active" class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="jubilados.html">
                        Productos <i class="icon-caret-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="jubilados.html">Préstamos a jubilados</a></li>
                        <li><a href="cbu.html">Préstamos CBU</a></li>
                        <li><a href="otros.html">Otros créditos</a></li>
                    </ul>
                </li>
                <li><a href="trabajar.php">Trabajá con nosotros</a></li>
            </ul>
        </div>
    </div>
</div>

madth3
  • 7,275
  • 12
  • 50
  • 74
yBrodsky
  • 4,981
  • 3
  • 20
  • 31

5 Answers5

15

Just pull-right dropdown-menu worked for me.

EDIT:

Deprecated .pull-right alignment

As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

MarceloBarbosa
  • 915
  • 16
  • 29
  • 1
    Good solution! this will add "left:auto" and "right: 0" style and successfully align the div to the right – Paul Lo Sep 01 '14 at 09:29
5

.pull-right has been deprecated as of Bootstrap 3.1.0

use .dropdown-menu-right

See http://getbootstrap.com/components/#dropdowns-alignment

rposborne
  • 802
  • 8
  • 17
5

As tested on version 3.3.2 of bootstrap, dropdown-menu-right does not work for me either. Here's what I did to fix it in my case.

Instead of:

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

I used:

<ul class="dropdown-menu" style="right: 0; left: auto;">

Works perfectly.

Vince
  • 910
  • 2
  • 13
  • 29
  • **dropdown-menu-right** already do this `.dropdown-menu-right{right:0;left:auto}` If this class doesn't work for you, you probably have an error in your CSS or use an old version of BootStrap. As I said, you need to use Bootstrap v3.1.0 or higher. – MarceloBarbosa Feb 22 '16 at 05:00
4

Try adding this to your css file or as style element this:

.dropdown-menu { left:auto; }

I had a similar problem with displaced drop-down and this worked for me.....

thoroughly-confused
  • 110
  • 8
  • To be honest, I'm not absolutely clear on this one. In my case I had the elements of the dropdown arranged horizontally and also displaced. I'm assumming that the setting of 'auto' resets the objects default placement, free of the any ancestor elements attribute settings (I had to add a separate entry to switch the menu entry display from horizontal to vertical). Anyone else know for definite? – thoroughly-confused Jul 01 '13 at 20:54
  • This seems to help explain why: http://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property – Greg Jul 02 '13 at 22:34
1

Change:

<ul class="nav pull-right">

to 

<ul class="nav pull-left">

OR just remove the helper class pull-right leaving only the nav class:

<ul class="nav">

Here's a JS Bin demo: http://jsbin.com/ezuray/1/

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480