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

Bootstrap Dropdown Menu width


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>
                    <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>

Open in new window

Thanks for your help!!!
1 Solution
Are you looking for something like this - second/third example
slightlyoffAuthor Commented:
Indeed!  Thank you so much for your help!

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