JSFiddle - React, Tailwind, and code Playground

by bd22

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="col-md-12 no-padding" style="margin-bottom: 0px;">
  <nav class="navbar navigation_bar navbar-default navbar-static-top" role="navigation">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <center>
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">HOME</a>
              </li>
              <li><a href="#">MENUITEM1</a>
              </li>
              <li><a href="#">MENUITEM2</a>
              </li>
            </ul>
          </center>
        </div>
        <div class="col-md-3"></div>
      </div>
      <!-- /.navbar-collapse !-->
    </div>
    <!-- /.container-fluid !-->
  </nav>
</div>
<div class="col-md-12 no-padding">
  <img class="img-responsive" src="http://oi58.tinypic.com/2gtnlgy.jpg" width="100%">
</div>

CSS

.no-padding {
  padding: 0;
}

.navbar-toggle .icon-bar{
  
}

.navigation_bar {
  background-color: #0099fe;
  margin-bottom: -3px;
  border-bottom: 2px solid #00467e;
}

.navbar-default .navbar-nav > li > a {
  color: #fff;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: #0099fe;
  color: #fff;
}

.nav_bar_wrapper {
  //background-color: #0099fe;
  max-width: 100%;
  margin: 0 auto;
}