CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2281858
user2281858

Reputation: 1997

dropdown-menu to take whole width of body - bootstrap

I am trying to make the horizontal dropdown menu to take the whole width of the body. The dropdown-menu should start from the left in the following fiddle.

FIDDLE HERE

The Sub List 1 should start from the Logo+Text area and should flow till the li continues.

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div>
                <span>Logo+Text</span>
            </div>
            <div class="btn-group" style="margin-left: 200px">
                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Lists</a>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#">Sub List 1</a>
                    </li>
                    <li>
                        <a href="#">Sub List 2</a>
                    </li>
                    <li>
                        <a href="#">Sub List 3</a>
                    </li>
                    <li>
                        <a href="#">Sub List 4</a>
                    </li>
                    <li>
                        <a href="#">Sub List 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 243

Answers (2)

Sarower Jahan
Sarower Jahan

Reputation: 1495

Just use position: initial;to the parent class btn-group. if not working, then use !important.

View my demo on JSFIDDLE

Good practice is: Add a new class has_dropdown to btn-group. Then style by has_dropdown class. Try as my demo.

Upvotes: 1

John
John

Reputation: 1

One way to do this would be to move your style="margin-left: 200px" CSS declarations to the dropdown-toggle anchor item, instead of the btn-group. That way, your container and consequently, your dropdown menu remains aligned to your logo while the trigger gets pushed to the right.

Upvotes: 0

Related Questions