Question

I’m using Twitter Bootstrap to built a layout. I’m having trouble with the positioning the dropdown in the navbar. If the .nav has pull-right, the dropdown that opens will always open to the left.

I want to be able to manually control whether it should open to the left or right. Is this possible?

<div class="navbar" id="navbar-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="logo pull-left" href="/index_dev.php/"></a>
            <ul class="nav pull-right">
                <li class="active"><a href="/index_dev.php/"> Shots</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Explore <i class="icon-caret-down"></i></a>
                    <ul class="dropdown-menu span6">
                        <li class="column-menu span2">
                            <ul>
                                <li><a href="#"><i class="icon-caret-right"></i> Dry Fly</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Popper</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Terrestrial</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Streamer</a></li>
                            </ul>
                        </li>
                        <li class="column-menu span2">
                            <ul>
                                <li><a href="#"><i class="icon-caret-right"></i> Wet Fly</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Nymph</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Emerger</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Streamer</a></li>
                            </ul>
                        </li>
                        <li class="column-menu span2">
                            <ul>
                                <li><a href="#"><i class="icon-caret-right"></i> Wet Fly</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Nymph</a></li>
                                <li><a href="#"><i class="icon-caret-right"></i> Emerger</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="divider-vertical"></li>
                                <li><a href="/index_dev.php/signup">Sign up</a></li>
                <li class="divider-vertical"></li>
                <li><a href="/index_dev.php/login">Sign in</a></li>
                            </ul>
        </div>
    </div>
</div>

Answer 1

You just need to override Bootstrap’s .dropdown-menu.pull-right styles:

.navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right {
    right: auto;
    left: -19px;
}
.navbar .pull-right > li > .dropdown-menu::before, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right::before {
    right: auto;
    left: 9px;
}
.navbar .pull-right > li > .dropdown-menu::after, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right::after {
    right: auto;
    left: 10px;
}

Use the class dropdown-right in any right-pulled menu you’d like to override.

jsFiddle