CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
taobataoma
taobataoma

Reputation: 19

how to let dropdown menu align-right?

i used bootstrap navbar,and a dropdown menu at right of the navbar,when run on big page,the dropdown menu can popup at right,it`s ok,but when i change the window size,the dropdown menu popup at left of the page?why?how to let it popup at right of the window always?

these are css code:

       <style>
        .navbar-header, .navbar-brand {
            float: left !important;
        }

        .dropdown-toggle {
            float: right !important;
        }

        .navbar-right:last-child {
            margin-right: 0px !important;
            padding-top: 8px !important;
        }

    </style>

these are html code：

            <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="navbar-right">
                    <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-label="Left Align">
                        <i class="glyphicon glyphicon-list" aria-hidden="true"></i>
                    </a>
                    <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
            <!-- /.container-fluid -->
        </nav>

how to let it popup at right of the window always? thanks,thanks.

Upvotes: 0

Views: 2442

Answers (3)

Bob Sforza
Bob Sforza

Reputation: 1

Appending the line .dropdown-menu { margin-left: 52.5vw; } to your css will force the dropdown menu to be at the right of the screen, always.

Upvotes: 0

StudioTime
StudioTime

Reputation: 23979

Add this to your css and it should fix the problem:

What it's doing is overwriting the left bootstrap setting and replacing it with right: 0

.open > .dropdown-menu {
  right:0;
  left: auto;
}

Upvotes: 0

Amar Lakshya Pawar
Amar Lakshya Pawar

Reputation: 62

The problem is you are trying to keep track of the float tag, that is fine but try to think about the position tag in your code and set the position to relative. Here is the code: 

      <style>
        .navbar-header, .navbar-brand {
            float: left !important;
            position: relative;
        }

        .dropdown-toggle {
            float: right !important;
            position: relative;
        }

        .navbar-right:last-child {
            margin-right: 0px !important;
            padding-top: 8px !important;
            position: relative;
        }

    </style>

Try to fiddle with the position tag a bit and you should get your result ;)

Upvotes: 1

Related Questions