Bootstrap Sub menu to stretch full screen and overlay the whole page - html

Question

I've made a JSFiddle to illustrate what I have at the moment. Please view my code here:
Some of my CSS snippet code:
.subnav {
display: none;
position: absolute;
//top: 58px;
background: #dfe6e8;
padding: 24px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
.subnav li {
margin-right: 0px !important;
min-width: 142px;
}
.subnav li a {
padding-bottom: 0px !important;
margin-bottom: 16px;
}
.subnav li:last-child a {
margin-bottom: 0px;
}
.has-dropdown:hover .subnav {
display: block;
}
I'm having problem to make my UL to stretch fullscreen. Here's what I'm trying to achieve as below:
Any help would be appreciated

Answer 1

To achieve this you have to make few structural and css changes. I edited your fiddle and made some changes to the navigation.
Html:
<div class="nav-container">
<nav class="top-bar">
<div class="container-fluid">
<div class="row nav-menu">
<div class="col-xs-12 columns">
<a class="navbar-brand" href="index.html"><img alt="Logo" class="logo logo-light" src="img/logo-light.png"> <img alt="Logo" class="logo logo-dark" src="http://www.subcablenews.com/links/images2/telenor.gif"></a>
<ul class="menu navbar-right">
<li>
ABOUT
</li>
<li class="has-dropdown">
PROGRAMMES
<ul class="subnav">
<li>
Programme 1
</li>
<li>
Programme 2
</li>
<li>
Programme 3
</li>
<li>
Programme 4
</li>
</ul>
</li>
<li class="has-dropdown">
PROJECTS
<div class="subnav subnav-halfwidth fullwidth">
<div class="col-sm-4">
<h6 class="alt-font">Project Lists</h6>
<ul class="subnav subnav-halfwidth">
<li>
Project 1
</li>
<li>
Project 2
</li>
<li>
Project 3
</li>
<li>
Project 4
</li>
</ul>
</div>
<div class="col-sm-4">
<h6 class="alt-font">Project Lists 2</h6><img alt="Logo" class="logo" src="http://www.subcablenews.com/links/images2/telenor.gif"></div>
<div class="col-sm-4">
<h6 class="alt-font">Project Lists 2</h6><img alt="Logo" class="logo" src="http://www.subcablenews.com/links/images2/telenor.gif"></div>
</div>
</li>
<li class="has-dropdown">
MEDIA
<ul class="subnav">
<li>
Media 1
</li>
<li>
Media 2
</li>
<li>
Media 3
</li>
<li>
Media 4
</li>
</ul>
</li>
<li>
CONTACT
</li>
</ul>
<ul class="social-icons text-right">
<li>
<i class="icon social_twitter"></i>
</li>
<li>
<i class="icon social_facebook"></i>
</li>
<li>
<i class="icon social_instagram"></i>
</li>
</ul>
</div>
</div><!--end of row-->
<div class="mobile-toggle">
<i class="icon icon_menu"></i>
</div>
</div><!--end of container-->
</nav>
</div>
Extra Css:
.subnav.fullwidth{
position: absolute;
right: -15px;
top: 58px;
width: 100vw;
background: #F6F4F4;
padding: 48px 64px 48px;
box-shadow: inset 0 1px 0 #e2e3df, 0 3px 6px rgba(113,111,111,.7);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
/* box-shadow: 1px 2px 5px #7D7D7D; */
}
.row{margin:0}
.top-bar .logo {
width: 150px;
}
.subnav li{float:none; display: block;}
Here is Updated Fiddle. Make sure you check the html as well. Because I made some changes in that too.
Read this to get better understand about bootstrap navigation. Hope this helps you.

Answer 2

It's because the parent elements aren't at 100% width. You can override this by using width:100vw; on any element that you want to take up the full width. Also, try and remember next time to only include css on your fiddle that's relevant to the html at question. It's a lot to sort through for someone trying to help when you include your entire stylesheet.