나브 (navbar)의 브랜드 이미지 센터

Question

나는 네버 (nabber)에 대한 도움이 필요하며 연구를 해왔으며 좋은 해결책을 찾지 못했습니다. 내가 원하는 것은 화면이 작을 때 아이콘이 중간에 오도록하는 것입니다.

데스크톱을 통해 볼 때 브랜드는 왼쪽에 큰 로고가 있어야하고 오른쪽에는 링크와 버튼이 있어야합니다.

작은 화면에서 보았을 때 왼쪽의 메뉴를 토글하고 기기의 너비에 따라 브랜드 아이콘을 중앙에 놓고 싶습니다. 아이콘을 왼쪽으로 옮겨 보았습니다 : 50px; 그러나 항상 반응하지는 않습니다.

포인터를 사용하여 도움을 주셔서 감사합니다. 내 코드 샘플은 아래 링크에 있으며, 최종 이미지가 아닌 Google에서 찾은 이미지를 사용하고 있습니다.

나는 모든 장치가 다른 화면 크기를 가지고 있지만, 내가 성공적으로 하나를 할 수 있다면, 나는 다른 것을 관리 할 수 ​​있다고 생각한다.

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/

당신은 여전히 ​​ADJ 필요

@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%); 
    } 
} 

이 경우 일 것이다 position: absolute 사용 그건 그렇고 브레이크 포인트는 없어.

도움이 되길 바랍니다.