Bootstrap Dropdown Menu width

Posted on 2014-08-12
Last Modified: 2014-08-12

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!!!
Question by:slightlyoff
    LVL 58

    Accepted Solution

    Are you looking for something like this - second/third example
    LVL 1

    Author Comment

    Indeed!  Thank you so much for your help!

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now