Responsive Bootstrap Barre De Navigation

Je suis en train de faire une barre de navigation de mon site qui a un menu déroulant sur la gauche, l'image au centre, et repliables point sur la droite. Je suis en utilisant bootstrap avec moins de style de la barre de navigation, mais je vais avoir des ennuis.

J'ai cherché un débordement de Pile à la recherche de moyens pour faire ce travail, comme cette question, mais les solutions il n'y a pas de travail pour moi. Je n'arrive pas à obtenir mon image à la ligne de sorte que son axe horizontal est centré avec le menu déroulant, repliables point, et la barre de navigation de conteneur. Quand j'ai essayer les solutions comme dans le mentionné précédemment lien, en prenant l'image de l'écoulement de la page par trait de sa position fixe, il est toujours en dessous de la barre de navigation. Je peux résoudre ce problème pour mon écran par jouer avec le CSS attributs, mais dès que je le redimensionnement de la fenêtre, les choses ont l'air terrible.

Est-il un moyen (peut-être en utilisant moins) de style bootstrap barre de navigation de sorte que peu importe ce que la taille de la fenêtre, j'ai un élément sur la gauche, l'image dans le centre et le point sur le droit, tous partageant un même centre horizontal de l'axe avec la barre de navigation?

MODIFIER

Ok, donc j'ai changé d'avis et a décidé de simplement ajouter quelques liens sur la gauche, une image dans le centre encore, et quelques liens sur la droite. Lorsque l'écran est plus petit, je veux les liens de l'effondrement de la droite proposant un bouton à bascule pour un menu. L'effondrement fonctionne très bien, mais lorsque les liens sont sur l'écran, je veux qu'ils soient centrée horizontalement dans la barre de navigation, avec l'image. L'image de droite est maintenant partiellement dans la barre de navigation et partiellement. Je veux aussi l'image de glisser vers la gauche lors de l'effondrement des liens à de plus petites tailles d'écran. Voici mon code maintenant:

Juste une remarque que je suis à l'aide de django pour servir le html, donc la syntaxe de l'image src.

CSS:

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

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

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" 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>