JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div class="navbar-inner">
        <div class="container">

            <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>

            <a class="brand" style="margin: 0; float: none;" href="#">
                <img src="http://chunlungsportclub.com/wp-content/themes/chunlungsportclub/images/logo.png" /></a>
            <div class="nav-collapse">

                <ul class="nav navbar-nav">
                    <li> <a href="#">Item 1</a></li>
                    <li> <a href="#">Item 1</a></li>
                    <li> <a href="#">Item 1</a></li>
                </ul>
            </div>

            <ul class="nav pull-right">
                <li><a href="#"><div class="nextCog"></div></a></li>
            </ul>

            <span class="navbar-text pull-right">superpup1 </span>

        </div>
    </div>
</div>

CSS

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;
    display: block;
}