How to style Bootstrap dropdown-menu to be full page width? - html

Question

I need to modify the dropdown-menu provided in Bootstrap, using the navbar-fixed-top, to appear on hover not vertically but horizontally li { display: inline-block } (that's easy), but so I need the actual ul.dropdown-menu to stretch the full width of the page. I can't seem to figure it out.
Don't give me a megamenu plugin or anything, please, just how can I fix it to stretch the width of the whole page? (not the page container either, the window)
Will probably need to wrap another element too, actually, as the ul needs to be centered.
So does anyone know how to do this?
EDIT: Figured it out (like 5 minutes after posting this) and with no added elements:
.nav { margin-bottom: 0; }
.dropdown { position: static; }
.dropdown-menu { width: 100%; text-align: center; }
.dropdown-menu>li { display: inline-block; }
and there you have it!

Answer 1

First you shouldn't wrap the navbar component in a div.container then update the css with the following Code:
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
display: table-cell;
}
check the demo here http://www.bootply.com/8EgGsi4F7w

Answer 2

<li class="dropdown open" style="position: initial;">
<ul class="dropdown-menu" style="width: 100%;">
just use the position: initial in the main li(dropdown) of your nav and in the child ul dropdown-menu set width 100%

Answer 3

Here the alternative that worked for me.
I just tried option 2. The key is:
Adding class position-static along with (the) dropdown class, which is the parent class of dropdown-menu as follows:
<li class="nav-item dropdown position-static">
Credit to its author: VigneshKannan3 from GeeksforGeeks
It looks like this answer to a similar question has the same approach.

Answer 4

Check this
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display: table;
border-radius: 0px;
width: 100%;
text-align: center;
left: 0;
right: 0;
}
.dropdown-menu > li {
display: table-cell;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#media screen and (max-width: 767px) {
.dropdown-menu > li {
display: block;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">Blackcat</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Shop</li>
<li class="dropdown">
Artist <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Rich</li>
<li>Shay</li>
<li>Jose</li>
<li>Marie</li>
<li>Simon</li>
<li>Jamie</li>
<li>Andrew</li>
<li>Teddie</li>
</ul>
</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end container -->
</div>
<!-- end navbar navbar-inverse navbar-static-top -->
<!-- container -->
<div class="container">
<div class="row">
<p>Site content here...</p>
</div>
<!-- End row -->
</div>
<!-- End container -->