JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js&quot;"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <body>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-12" style="background-color:#FABC41; height: 50px;">BAR</div>
          </div>
          <div class="row">
            <div class="col-sm-12" style="padding:0;"><img class="img-responsive" src="http://travelandwildlifephotography.com/wp-content/uploads/2014/07/Camping-on-Fraser-Island1.jpg" alt="CLI Engage"> </div>
          </div>
        </div>
        <nav class="navbar navbar-engage">
          <div class="container-fluid">
            <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div>
            <div>
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                  </ul>
                </li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
              </ul>
            </div>
          </div>
        </nav>

CSS

.navbar-engage {
    	background-color: rgba(0,0,0,0.5);
     filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
     -ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorStr="#E6FFFFFF", endColorStr="#E6FFFFFF");
    	border-color: #e7e7e7;
        position:relative;
        top:-50px;
    }
.navbar-engage a {
    color:white;

    }
@media (min-width: 768px) {
    .navbar-engage a  {
        color:white;
    }
    .navbar-engage li a:hover {
        color:black;
    }
}
@media (max-width: 767px) {
    .navbar-engage {
        top:0px;
        background:#808184;
    }
}