Zentrieren Marke Bild in Navbar

Question

Ich brauche Hilfe mit einem Nabber, ich habe recherchiert und kann nicht ganz mit einer guten Lösung kommen. Was ich erreichen möchte ist, dass das Symbol in der Mitte ist, wenn der Bildschirm klein ist, zum Beispiel kleine Geräte.

Bei der Betrachtung über einen Desktop sollte die Marke links mit einem großen Logo und rechts die Links und Schaltflächen sein.

In einem kleinen Bildschirm möchte ich die Schaltfläche auf der rechten Seite, Toggle-Menü auf der linken Seite und Marken-Symbol in Abhängigkeit von der Breite des Geräts zentriert werden. Ich habe versucht, das Symbol nach links zu bewegen: 50px; aber es reagiert nicht immer.

Vielen Dank für Ihre Hilfe mit irgendwelchen Zeigern, mein Codebeispiel ist in der Verbindung unten, und ich verwende diese Bilder, die ich bei Google fand, nicht meine endgültigen Bilder.

Ich weiß, dass alle Geräte unterschiedliche Bildschirmgrößen haben, aber ich denke, wenn ich erfolgreich eins kann, kann ich die anderen verwalten, richtig?

https://jsfiddle.net/irvgonz/mku4enff/2/

<!-- Work on this new nav --> 
 
<nav role="navigation" class="navbar navbar-default navbar-fixed-top" width="100%" height="" id="navbar"> 
 
    <div class="container"> 
 
    <!-- Brand Logo--> 
 
    <div class="navbar-header pull-left hidden-xs"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img id="logo" alt="Brand" src="http://www.underconsideration.com/brandnew/archives/facebook_2015_logo_detail.png" /> 
 
     </a> 
 
    </div> 
 
    <div class="navbar-header pull-left visible-xs-block"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img id="icon" src="https://image.freepik.com/free-icon/facebook-symbol_318-37686.png" /> 
 
     </a> 
 
    </div> 
 
    <!-- Donate Button stays outside the menu pulldown--> 
 
    <div class="navbar-header pull-right"> 
 
     <ul class="pull-left"> 
 
     <button id="btn" type="button" class="btn btn-default navbar-btn"> <b>button</b> </button> 
 
     </ul> 
 
     <!-- Place for the menu collapse--> 
 
     <button id="togglebtt" type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed"> 
 
     <span class="glyphicon glyphicon-menu-hamburger"></span> 
 
     </button> 
 
    </div> 
 
    <!-- Rest of Menu --> 
 
    <div class="collapse navbar-collapse pull-right"> 
 
     <!-- once open and collapsed items will be on left --> 
 
     <ul class="nav nav-pills pull-left"> 
 
     <li class="header-nav"> 
 
      <a href="#" class="header-nav" id="mission"> <b>our Mission</b> </a> 
 
     </li> 
 
     <li class="header-nav"> 
 
      <a href="#" class="header-nav" id="join"> <b>join us</b> </a> 
 
     </li> 
 
     <li class="header-nav hidden-sm"> 
 
      <a href="#" class="header-nav" id="about"> <b>the team</b> </a> 
 
     </li> 
 
     <li class="header-nav hidden-sm"> 
 
      <a href="#" data-toggle='modal' class="header-nav" id="contact"> <b>CONTACT US</b> </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

https://jsfiddle.net/up6kcu5q/1/

position: absolute Verwendung würde

@media (max-width: 767px) { 
    .container > .navbar-header.visible-xs-block { 
    position: absolute; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
     -moz-transform: translateX(-50%); 
     -ms-transform: translateX(-50%); 
     -o-transform: translateX(-50%); 
      transform: translateX(-50%); 
    } 
} 

Sie in diesem Fall noch arbeiten müssen adj Übrigens den Breakpoint.

Hoffe, dass dies hilft