JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header id="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#body">
Logo
</a>
</div>
<nav class="collapse navbar-collapse navbar-right" role="navigation">
<ul id="nav-js" class="nav navbar-nav">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
<li><a href="#">Item8</a></li>
<li><a href="#">Item9</a></li>
<li><a href="#">Item10</a></li>
<li><a href="#">Item11</a></li>
<li><a href="#">Item12</a></li>
<li><a href="#">Item13</a></li>
<li><a href="#">Item14</a></li>
<li><a href="#">Item15</a></li>
</ul>
</nav>
</div>
</header>
CSS
#navigation {
background-color: rgba(230, 104, 92, 1);
}
.navbar-toggle i, .navbar-brand, .navbar-nav li a {
color: #fff;
}
.nav {
white-space: nowrap;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}