Is there a way to create a mega menu within the navigation list element that spans the full width of the page without using JavaScript? Right now, I'm facing an issue where the mega menu is relative to its parent and I want it aligned flush with the left edge of the entire page.
Currently, my mega menu is aligned to the first nav item rather than spanning the full width that I desire.
Can anyone suggest a non-JavaScript solution for this matter?
Below is the attached image showing the current layout:
<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;
}