Bootstrap brand logo between links

Question

Need help with this problem, how to insert brand logo between navigation links? And how to move link near the brand logo like this image. . And I need responsive to works great. Here is code.

        <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand navbar-brand-centered">Logo</div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-brand-centered">
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

Maybe this is what you are looking for.

    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar navbar-inner">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>
            <div class="collapse navbar-collapse" id="navbar-brand-centered">
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <div class="navbar-brand navbar-brand-centered">Logo</div>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Change bootstrap CSS:

.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-inner {
  text-align:center;
}

Answer 2

Thanks https://jsfiddle.net/phg350de/4/

HTML:

        <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand navbar-brand-centered">Logo</div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-brand-centered">
      <div class="row">
        <div class="col-xs-0 col-sm-3 col-md-3">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
          <ul class="nav navbar-nav">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </div>
        <div class="col-xs-0 col-sm-3 col-md-3">
        </div>
      </div>
            </div>
        </div>
    </nav>

CSS:

.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 180px;
text-align: center;
background-color: transparent;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
}