Responsive Bootstrap Navbar

Question

I am trying to make a Navbar for my site that has a dropdown menu on the left, image in the center, and collapsable item on the right. I am using bootstrap with less to style the navbar, but I am having trouble.

I have searched Stack overflow looking for ways to make this work, like this question, but the solutions there aren't working for me. I can't seem to get my image to line up so that its horizontal axis is centered with the dropdown menu, collapsable item, and navbar container. When I try the solutions like in the previously mentioned link, taking the image out of the flow of the page by maxing its position fixed, it always appears below the navigation bar. I can fix this for my screen by messing with the CSS attributes, but as soon as I resize the window things look awful.

Is there a way (possibly using less) to style the bootstrap navbar so that no matter what the size of the window is, I have an item on the left, image in center, and item on the right, all sharing a common horizontal center axis with the navbar?

EDIT

Okay, so I have changed my mind and decided to just add some links on the left, an image in the center still, and some links on the right. When the screen gets smaller, I want the links to collapse to the right offering a toggle button for a menu. The collapsing is working fine, but when the links are on the screen I want them to be horizontally centered in the nav bar, along with the image. The image right now is partially in the nav bar and partially out. I also want the image to slide to the left when the links collapse at smaller screen sizes. Here is my code right now:

Just a note that I am using django to serve the html, hence the syntax for the image src.

#logo-with-slogan {
  max-width: 35%;
  padding: 3% 0 3% 0;
}

.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  margin: auto;
}

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
  </div>
  <a class="navbar-brand" href="#">
    <img id="logo-with-slogan" src="{% static " img/LogoWslogan.jpg " %}" />
  </a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
      <li><a href="#itemonelink">Item One</a></li>
      <li><a href="#itemtwolink">Item Two</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#signuplink">Signup</a></li>
      <li><a href="#loginlink">Login</a></li>
    </ul>
  </div>
</nav>

Solution

So you're looking to do something like this, with the image fitted:

HTML

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>    
    </div>
    <a class="navbar-brand navbar-center" href="#">
        <img src="http://placehold.it/100x40" alt="Logo Here">
    </a>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#itemonelink">Item One</a></li>
            <li><a href="#itemtwolink">Item Two</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#signuplink">Signup</a></li>
            <li><a href="#loginlink">Login</a></li>
        </ul>
    </div>
</nav>

CSS

.navbar-brand {
    float: none;
    padding: 5px;
}
.navbar-center {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    height:100%;
}

Demo: JSFiddle