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>

5 Answers 5

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.

1
  • 1
    Good solution! this will add "left:auto" and "right: 0" style and successfully align the div to the right
    – Paul Lo
    Sep 1, 2014 at 9:29
5

.pull-right has been deprecated as of Bootstrap 3.1.0

use .dropdown-menu-right

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

0
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.

1
  • 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. Feb 22, 2016 at 5: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.....

2
  • 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? Jul 1, 2013 at 20:54
  • This seems to help explain why: stackoverflow.com/questions/4471850/…
    – Greg
    Jul 2, 2013 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/

4
  • 1
    pull-left isn't needed as by default it will be aligned to the left anyway. May 22, 2013 at 11:26
  • Will try it once I get home. Thanks.
    – yBrodsky
    May 22, 2013 at 16:45
  • This solution is not working. It moves my menu to the left. Anyhow, even removing the class and accepting the menu on the left, the dropdown list still appears displaced
    – yBrodsky
    May 25, 2013 at 3:18
  • 1
    Bump please. The issue persists
    – yBrodsky
    May 25, 2013 at 15:10

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.