Full width mega menu on desktop within a Bootstrap Container

Question

I'm trying to create a mega menu that lives within the navigation list element but at the same time the mega menu needs to span the full width of the page.

I'm stuck in that the mega menu is relative to where it's parent resides. The mega menu is aligned to the first nav item, where I want it flush to the left edge of the whole page.

Is there a non JS solution to this?

The attached image shows what I currently have.

Link to a quick fiddle:

<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-xs-3 logo">Logo</div>
      <div class="col-xs-6 nav">
        <ul>
          <li>
            <a href="#">Link 1</a>
            <div class="mega-menu">
              This needs to be full width.            
            </div>
          </li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 1</a></li>
        </ul>
      </div>
      <div class="col-xs-3 secondary-nav">Other links</div>
    </div>
  </div>
</div>

.header {
  width: 100%;
}

.container {
  background-color: #ccc;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.nav ul {
  display: inline-block;
}

.nav ul li {
  display: block;
  float: left;
  margin-right: 20px;
}

.nav ul li a {
  background-color: #888;
  color: #fff;
}

.nav .mega-menu {
  background-color: #aaa;
  display: block;
  height: 500px;
  position: absolute;
  top: 35px;
  width: 100vw;
}

Answer 1

add these two lines to your .nav .mega-menu's css:

.nav .mega-menu {
  position: fixed;
  left: 0px;
}

jsfiddle: https://jsfiddle.net/n2oodnrz/23/