CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-4
JustNguyenBaby
JustNguyenBaby

Reputation: 33

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;
}

Upvotes: 3

Views: 2012

Answers (2)

terraelise
terraelise

Reputation: 3199

You can add "position: static;" to .nav in your CSS. Elements positioned absolute will be "stuck" inside any parents that have non-static positioning.

Upvotes: 0

Stavm
Stavm

Reputation: 8131

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

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

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

Upvotes: 2

Related Questions