JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<header class="container-fluid">
    <div class="container bghead navbar-fixed-top ">
        <div class="row">
          <div class="col-md-4">
          <a href="#"><img class="img-responsive" src="http://i.dailymail.co.uk/i/pix/2014/09/03/article-2741513-2102157B00000578-742_306x211.jpg"></a><br>
          </div>
              <div class="col-md-8">
                  <nav class="navbar navbar-default bgnav">
                      <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <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>
                        </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><a href="#">Home<span class="sr-only"></span></a></li>
                            <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Institucional <span class="caret"></span></a>
                         ...

CSS

/*Para dispositivos com width menor que 768px*/
body {
  padding-top: 290px;
}

/*Para dispositivos com width maior ou igual a 768px*/
@media (min-width: 768px) {
 body {
     padding-top: 220px;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
 body {
     padding-top: 320px;
     /*Para dispositivos com width maior ou igual a 992px*/
  }
}

* {border-radius: 0 !important;}
body { 
background-image:url(../images/straws_@2X.png); }
.textwhitecolor {color: white !important;}
.consultbg {background-color: darkred; border: 1px solid #fff;}
.darkredborder {border: 4px solid #fff; }
.shadowslider {box-shadow: 0px 3px 10px #000; border: 2px solid #fff;}
.nomarginmvv {margin-left: 0px; padding-left: 0px;}
.mvvtitle {color: darkred; text-transform: uppercase;}
.bghead {background-color: aliceblue;}
.bgnav {border: 1px solid #ccc;/* box-shadow: 0px 2px 5px #dedede; */
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
.bgnav a:hover {background-color: #ddd !important;}