JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="#">Project name</a>

    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
        <li><a href="#contact">Contact</a>
        </li>
        <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li><a href="#">Link</a>
            </li>
          </ul>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a>

            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Dropdown 2 Child 1</a>
              </li>
              <li><a href="#">Dropdown 2 Child 2</a>
              </li>
              <li><a href="#">Dropdown 2 Child 3</a>
              </li>
              <li><a href="#">Dropdown 2 Child 4</a>
              </li>
            </ul>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>
<div class="container" id="page">Me finks this is a page.</div>

CSS

@media (min-width:768px) {
  body {
    padding-top: 60px
  }
  /* height of the menu collapsed */
  .nav-bg {
    height: 0px;
    width: 100%;
    position: absolute;
    top: 50px;
    background: #e7e7e7;
    transition: all .5s ease-in-out;
  }
  .menu-open .nav-bg {
    height: 50px
  }
  /* change to your height of the child menu */
  .menu-open #page {
    padding-top: 60px;
    transition: all .2s ease-in-out;
  }
  #page {
    height: 1000px;
    /* demo only */
  }
  .navbar-nav.nav>li {
    position: static
  }
  .navbar-nav.nav .dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    box-shadow: none;
    border: none;
    margin: 0 auto;
    max-width: 1170px;
    background: #e7e7e7;
    padding: 0;
  }
  .navbar-nav.nav .dropdown-menu>li {
    float: left
  }
  .navbar-nav.nav .dropdown-menu>li>a {
    width: auto !important;
    background: transparent;
    line-height: 49px;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  /* active show child menu */
  .navbar-nav .dropdown.active ul {
    display: inline;
  }
}

JavaScript

$('.navbar').append('<span class="nav-bg"></span>');


$('.dropdown-toggle').click(function() {

  if (!$(this).parent().hasClass('open')) {

    $('html').addClass('menu-open');

  } else {

    $('html').removeClass('menu-open');

  }

});

// Hide the .nav-bg BUT not if .dropdown has class .active
$(document).on('click touchstart', function(a) {

  if ($(a.target).parents().index($('.navbar-nav')) == -1) {
    //  $('html').removeClass('menu-open');
  }

});


$(window).on("load resize", function() {
  if ($(window).width() >= 768) {

    if ($('.navbar-nav.nav .dropdown').hasClass('active')) {
      $('html').addClass('menu-open');
    }
  }
});

$("li").click(function(e) {
  if ($(this).parent().hasClass('dropdown-menu')) {
    return;
  }
  $("li[class *='active']").each(function() {
    $(this).removeClass('active');

  });

  if (!$(this).hasClass('dropdown')) {
    $('html').removeClass('menu-open');
  }
  $(this).addClass('active');
  if ($(a.target).parents().index($('.navbar-nav')) == -1) {
    $('html').removeClass('menu-open');
  }
});