CodePen Embed - Responsive Bootstrap mega menu

<!--
Follow me on https://twitter.com/koucik
My stuff: skywalkapps.github.io
-->
<div class="example-megamenu">
  
<h3>Responsive Bootstrap mega menu with various content</h3>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand"  href="#"><strong>MegaMenu</strong></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown dropdown-megamenu open">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Today <span class="sr-only">(current)</span></a>

          <div class="dropdown-container">
            <div class="row">
              <div class="col-sm-6 col-md-4">
                <div class="media">
                  <div class="media-left">
                    <a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
                    <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                    <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                  </div>
                  <div class="media-body">
                    <h5>Today's Featured Collections</h5>
                    <ul class="list-links">
                      <li><a href="#">Press Every Button</a></li>
                      <li><a href="#">Travel with Technology</a></li>
                      <li><a href="#">Smart Choice</a></li>
                      <li><a href="#">Fall in Love with Tech</a></li>
                      <li><a href="#">Smartphones at a Snip</a></li>
                    </ul>

                  </div>
                </div>
              </div><!-- /col -->

              <div class="col-sm-6 col-md-4">
                <div class="media">
                  <div class="media-left">
                    <a class="link-image" href="#"><img class="media-object" src="holder.js/100x100"></a>
                    <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                    <a class="link-image link-image-sm" href="#"><img class="media-object" src="holder.js/46x46"></a>
                  </div>
                  <div class="media-body">
                    <h5>Today's Trending Collections</h5>
                    <ul class="list-links">
                      <li><a href="#">Harley-Davidson</a></li>
                      <li><a href="#">Will you be my Valentine?</a></li>
                      <li><a href="#">Summer Wedding Bridesmaid Dresses</a></li>
                      <li><a href="#">Pink Wedding Centerpiece Ideas</a></li>
                      <li><a href="#">Wedding Party Table Runners</a></li>
                      <li><a href="#">Backyard Wedding Reception</a></li>
                    </ul>

                  </div>
                </div>
              </div><!-- /col -->

              <div class="col-sm-6 col-md-4">
                <h5>My Collections</h5>
                <span class="text-muted">You currently have no collections. <a href="#">Learn how to create one</a>.</span>
              </div><!-- /col -->

            </div><!-- /row -->
          </div><!-- /dropdown-container -->

        </li>
        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Fashion</a>
          <div class="dropdown-container">
            <div class="row">
              <div class="col-sm-4 col-md-2">

                <h5>Top categories</h5>
                <ul class="list-links">
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Men's</a></li>
                  <li><a href="#">Women's</a></li>
                  <li><a href="#">Kids</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-4 col-md-3">

                <h5>Shop for</h5>
                <ul class="list-links">
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Jewelry &amp; Watches</a></li>
                  <li><a href="#">Handbags &amp; Accessories</a></li>
                  <li><a href="#">Health &amp; Beauty</a></li>
                  <li><a href="#">Shoes</a></li>
                  <li><a href="#">Sales &amp; Events</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-12 col-md-7">
                <img src="holder.js/100px200">
              </div><!-- /col -->

            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>

        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Electronics</a>

          <div class="dropdown-container">
            <div class="row">
              <div class="col-sm-4 col-md-2">

                <h5>Top categories</h5>
                <ul class="list-links">
                  <li><a href="#">Cell Phones &amp; Accessories</a></li>
                  <li><a href="#">Cameras &amp; Photo</a></li>
                  <li><a href="#">Computers &amp; Tablets</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-4 col-md-3">

                <h5>Other categories</h5>
                <ul class="list-links">
                  <li><a href="#">Car Audio, Video &amp; GPS</a></li>
                  <li><a href="#">iPhone</a></li>
                  <li><a href="#">iPad</a></li>
                  <li><a href="#">TV, Audio</a></li>
                  <li><a href="#">Video Games &amp; Consoles</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-12 col-md-7">
                <img src="holder.js/100px200">
              </div><!-- /col -->

            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>
        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Deals</a>

          <div class="dropdown-container">
            <div class="row">

              <div class="col-sm-3">

                <h5>Best deals of the day</h5>
                <ul class="list-links">
                  <li><a href="#">Car Audio, Video &amp; GPS</a></li>
                  <li><a href="#">iPhone</a></li>
                  <li><a href="#">iPad</a></li>
                  <li><a href="#">TV, Audio</a></li>
                  <li><a href="#">Video Games &amp; Consoles</a></li>
                </ul>

              </div><!-- /col -->

              <div class="col-sm-3">

                <a href="#" class="thumbnail">
                  <img src="holder.js/100px140" alt="">
                  <div class="caption">
                    <h5>Waterproof cellphone cover</h5>
                    <p>$5.99</p>
                  </div>
                </a>

              </div><!-- /col -->

              <div class="col-sm-3">

                <a href="#" class="thumbnail">
                  <img src="holder.js/100px140" alt="">
                  <div class="caption">
                    <h5>Large 20 slot leather watch box organizer</h5>
                    <p>$25.99</p>
                  </div>
                </a>

              </div><!-- /col -->

              <div class="col-sm-3">

                <a href="#" class="thumbnail">
                  <img src="holder.js/100px140" alt="">
                  <div class="caption">
                    <h5>Samsung Galaxy Tab A SM-P550NZAAXAR 9.7-Inch W-Fi Tablet (Titanium with S-Pen)</h5>
                    <p>$319</p>
                  </div>
                </a>

              </div><!-- /col -->


            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>

        <li class="dropdown dropdown-megamenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contact Us</a>

          <div class="dropdown-container">
            <div class="row">

              <div class="col-sm-6 col-md-4">
                <h5>Contact us</h5>
                <p>Feel free to drop us a line, we will respond as sson as possible.</p>
                <form>
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Email">
                  </div>
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputText1">Text</label>
                    <textarea type="password" class="form-control" id="exampleInputText1" placeholder="Your Message" rows="3"></textarea>
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
              </div><!-- /col -->

              <div class="col-sm-6 col-md-8">
                <img src="holder.js/100px260?text=Map">
              </div><!-- /col -->

            </div><!-- /row -->
          </div><!-- /dropdown-container -->
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
  
</div>

@grid-gutter-width: 30px;
@line-height-base: 1.428571429;
@gray: #555;
@link-hover-color: darken(#337ab7, 15%);

/* Descendant of .nav, Bootstrap specificity (shouldn't be like this) */
.nav > .dropdown-megamenu {
  position: static;
}

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-container {
      position: static;
      float: none;
      width: auto;
      margin-top: 0;
      border: 0;
      box-shadow: none;
      border-radius: 0;
  }
}

.dropdown-megamenu > .dropdown-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 100%;
    padding: 0.5 * @grid-gutter-width;
}

.dropdown-megamenu .dropdown-menu {
  display: block;
}

.link-image .media-object {
  float: left;
  margin-bottom: 0.25 * @grid-gutter-width;
}

.link-image-sm + .link-image-sm .media-object {
  margin-left: 0.25 * @grid-gutter-width;
}

.thumbnail .caption {
  min-height: 120px;
}
.thumbnail:hover {
  text-decoration: none;
}

/* Link list */
.list-links {
  list-style: none;
  padding: 0;

  li {
    line-height: 1.2 * @line-height-base;
  }

  a {
    color: @gray;

    &:hover,
    &:focus,
    &:active {
      color: @link-hover-color;
    }
  }
}

/* General styles to improve presentation */
html, body {
  height: 100%;
  min-height: 500px;
}
body {
  background: linear-gradient(to bottom, #59a874 0, #449a63 100%);
}
.example-megamenu {
  width: 100%;
  max-width: 1140px;
  padding: 20px;
  margin: 0 auto;
}
h3 {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 2rem;
  color: #fff;
}

View Compiled

  $(document)
    .on('click.bs.dropdown.data-api', '.dropdown', function (e) { e.stopPropagation() })

This Pen is owned by Martin Stanek on CodePen.

See more by @skywalkapps on CodePen

External CSS

External JavaScript