• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 9158
  • Last Modified:

Bootstrap Dropdown Menu width

Hello!

I'm working with Bootstrap 3 and I'm running into issues trying to make a Dropdown menu the width of the Navbar.

I can alter the width of the dropdown menu by using width:800px !important inside the "container" div.
But as I think of the responsiveness of the design, it seems I shouldn't be using fixed widths.  However, if I try to use %, it doesn't work.

Any suggestions on what I could do?

<div class="col-lg-12" style="margin-top:20px; background-color:#000; padding-left:15px; padding-right:15px; margin-top:0px; padding-top:0px;">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                    	<a href="#" class="dropdown-toggle" data-toggle="dropdown">Section 1<span class="caret"></span></a>
                          <ul class="dropdown-menu" role="menu">
                            <li style="width:600px !important;">
                            	<div class="container" style="width:800px !important;">
                                    <div class="row" >
                                        <div class="col-md-8">Sub Menu and Information Area - should be the width of the nav.</div>
                                    </div>
                                </div>
                            </li>
                          </ul>
                    
                    </li>
                    <li><a href="#">Section 2</a></li>
                    <li><a href="#">Section 3</a></li>
                    <li><a href="#">Section 4</a></li>
                    <li><a href="#">Section 5</a></li>
                    <li><a href="#">Section 6</a></li>
                    <li><a href="#">Section 7</a></li>
                    <li><a href="#">Section 8</a></li>
                </ul>
            </div>
          </div>

Open in new window


Thanks for your help!!!
0
slightlyoff
Asked:
slightlyoff
1 Solution
 
GaryCommented:
Are you looking for something like this - second/third example
http://geedmo.github.io/yamm3/
0
 
slightlyoffAuthor Commented:
Indeed!  Thank you so much for your help!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now