JustNguyenBaby JustNguyenBaby -4 years ago 126
HTML Question

Full width mega menu on desktop within a Bootstrap Container

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 Source

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

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download