Using bootstrap 3, the site I'm working on has several navbars, a top with home, signup,..., another with a search bar option, and then yet another for the main categories(navbar3), which are dropdowns. The problem is with navbar3. I need the dropdown to take up the full width of the view width, not to exceed 980px. Right now, when the dropdown is clicked, the flyout begins at the beginning of its parent div with its respected col-xs-2. I need the flyouts to begin at the beginning of the row (like the footwear is currently doing) and extend the full width up to 980px. So if you click on clothing, i want that dropdown to begin at the same point where footwear dropdown begins. I've excluded some of the css that has no effect on coming up with a solution. And brands doesn't have a flyout
#backgroundcategory {
margin: 0 auto;
height: 37px;
}
.maxwidth {
max-width: 980px;
}
.categorydropadjust {
width: 20%;
}
.categoryheaders {
padding-left: 0;
margin: 0 auto;
font-weight: 700;
font-size: 20px;
height: 37px;
}
.vcenter {
display: flex;
align-items: center;
}
.centercat {
margin: 0 auto;
}
.dropdowncat:hover {
cursor: pointer;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="backgroundcategory">
<div class="container-fluid maxwidth">
<div class="row">
<div class="col-xs-2 categorydropadjust">
<div class="dropdown dropdowncat">
<div class="dropdown-toggle categoryheaders vcenter" id="footwear" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div class="centercat vcenter"><span class="glyphicon glyphicon-star"></span><span>FOOTWEAR</span>
</div>
</div>
<ul class="dropdown-menu dropdown-menu-back" aria-labelledby="footwear">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</div>
<div class="col-xs-2 categorydropadjust">
<div class="dropdown dropdowncat">
<div class="dropdown-toggle categoryheaders vcenter" id="clothing" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div class="centercat vcenter"><span class="glyphicon glyphicon-star"></span><span>CLOTHING</span>
</div>
</div>
<ul class="dropdown-menu dropdown-menu-back" aria-labelledby="clothing">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</div>
<div class="col-xs-2 categorydropadjust">
<div class="dropdown dropdowncat">
<div class="dropdown-toggle categoryheaders vcenter" id="gear" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div class="centercat vcenter"><span class="glyphicon glyphicon-star"></span><span>GEAR</span>
</div>
</div>
<ul class="dropdown-menu dropdown-menu-back" aria-labelledby="gear">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</div>
<div class="col-xs-2 categorydropadjust">
<div class="dropdown dropdowncat colortoggle">
<div class="dropdown-toggle categoryheaders vcenter" id="deals" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div class="centercat vcenter"><span class="glyphicon glyphicon-star goldcolor"></span><span class="goldcolor">DEALS</span>
</div>
</div>
</div>
</div>
<div class="col-xs-2 categorydropadjust">
<div class="dropdown dropdowncat colortoggle">
<div class="dropdown-toggle categoryheaders vcenter" id="brands" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<div class="centercat vcenter"><span class="glyphicon glyphicon-star goldcolor"></span><span class="goldcolor">BRANDS</span>
</div>
</div>
<ul class="dropdown-menu dropdown-menu-back" aria-labelledby="brands">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</div>
</div>
</div>
</div>Remove position: relative from the dropdown parents and make it relative for the full width bar. Position Relative makes any absolute children use that as it's positioning reference point.
If you add the following to the bottom of the CSS you'll get the effect you need.
.categorydropadjust, .dropdown {
position: static;
}
.container-fluid {
position: relative;
}
.dropdown-menu {
width: 100%;
}