Home/ Questions/Q 9154641
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:27:35+00:00

I’m using a Bootstrap Navbar that is right aligned using the pull-right class. When

  • 0

I’m using a Bootstrap Navbar that is right aligned using the pull-right class. When I add a dropdown to the navbar, that dropdown’s sub-menu is also right aligned with it’s parent which doesn’t look good. How do I get it to be left aligned with the parent? I’ve tried adding the pull-left class just about everywhere I can think of, but doesn’t seem to work. Ideas?

Here’s the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .menu {
            font-size: 18px;
            margin-top: 10px;
        }
        .menu_icon {
            margin-top: 3px;
        }
        .dropdown-menu .sub-menu {
            left: 100%;
            position: absolute;
            top: 0;
            visibility: hidden;
            margin-top: -1px;
        }
        .dropdown-menu li:hover .sub-menu {
            visibility: visible;
        }
        .dropdown:hover .dropdown-menu {
            display: block;
        }
        .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
            margin-top: 0;
        }
    </style>
    <link rel="stylesheet" href="css/bootstrap-responsive.css">

    <script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">My Brand</a>
            <div class="nav-collapse">
                <ul class="nav pull-right">
                    <li><a class="menu" href="index.php"><i class="icon-home icon-black menu_icon"></i> Home</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle menu" data-toggle="dropdown" href="#about">Dropdown <b
                                class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                    <li><a class="menu" href="#"><i class="icon-wrench icon-black menu_icon"></i> Link 1</a></li>
                    <li><a class="menu" href="#"><i class="icon-tag icon-black menu_icon"></i> Link 2</a></li>
                    <li><a class="menu" href="#"><i class="icon-envelope icon-black menu_icon"></i> Link 3</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should add an ID (e.g. id=myId) to your <ul class="dropdown-menu"> and write something like this:

    #myId {right: auto}
#myId::before {left:12px;right:auto}
#myId::after {left:13px;right:auto}

    Those CSS rules resets the pull-right dropdown styles to the default values.

    This worked for me. Have a look at this sample:
    http://jsfiddle.net/RzMRA/3/

    • 0