부트 스트랩 탐색/헤더, 디바이더, 로고

Question

나는 질문이있다 :이

포토샵에서 만든 하지만이에서 볼 같은 로고를 배치하는 가장 쉬운 방법은 같은 부트 스트랩의 탐색 메뉴를 만들고 싶어 영상. (검은 색 부분은 슬라이드 쇼입니다.) 또한 메뉴 항목 사이의 칸막이로 이와 같은 메뉴를 만드는 가장 쉬운 방법은 무엇인지 알고 싶습니다.

<header> 


    <div class="container"> 
    <div class="row"> 
    <div class="col-sm-4"> 
    </div> 
    <div class="col-sm-4"> 
    </div> 
    <div class="col-sm-2"> 
     <i class="fa fa-phone" aria-hidden="true"></i><p>06 12345678</p> 
    </div> 
     <div class="col-sm-2"> 
      <i class="fa fa-envelope" aria-hidden="true"></i><p>info@mail.nl</p> 
    </div> 
    </div> 
</div> 


    </header> 
      <div class="container"> 
<nav class="navbar"> 

      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false"> 
        <span>Menu</span> 
        <span class="glyphicon glyphicon-menu-hamburger"> 
       </button> 
       <a class="navbar-brand" href="#"> 
        <img src="images/logo.png"> 
       </a> 
      </div> 
      <div class="collapse navbar-collapse" id="main-menu"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#" class="nav-selected">CURRENT</a></li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">page2 <span class="caret"></span></a> 
         <ul class="dropdown-menu arrow_box"> 
          <li><a href="#">dropdownpage1</a></li> 
          <li><a href="#">dropdownpage2</a></li> 
         </ul> 
        </li> 
        <li><a href="#">page3</a></li> 
        <li><a href="#">Page4</a></li> 
        <li role="separator" class="divider"><a href="#">page5</a></li> 
       </ul> 
      </div> 
    </nav> 
      </div> 

여기에 CSS :

nav{ 
    background:#fff; 
    width:100%; 
    padding:0px 30px; 
} 

.navbar-header{ 
    display:block; 
    text-align:center; 
    height:80px; 
} 

    .navbar-header img{ 
     margin:0px auto; 
     height:45px; 
    } 

    a.navbar-brand{ 
     padding:20px 30px; 
     position: absolute; 
     width:auto; 
     left:0; 
     top:0; 
     text-align:center; 
     margin:auto; 
    } 

    .navbar-collapse.collapse{ 
     padding:0px; 
     white-space: nowrap; 
    } 

    .navbar{ 
     background:#fff; 
     width:100%; 
     margin:0px; 
     padding-left: 0px; 
     padding-right: 15px; 
     z-index:10; 
     border: 0px solid transparent; 
     border-radius:0px 
    } 

    .navbar > div{ 
     margin-left: 0px; 
     margin-right: 0px; 
    } 


    .collapse, .nabar-right{ 
     margin-right: 0px!important; 
    } 

     .navbar ul li a{ 
      background:none; 
      text-transform:uppercase; 
      font-family: 'Open Sans', sans-serif; 
      font-weight:300; 
      font-size:14px; 
      color:#000; 
      letter-spacing: 0.035em; 
      text-decoration: none; 
     } 



ul.nav li.open ul.dropdown-menu li{ 
      padding:0px 0px; 
     } 

     .navbar ul li a:hover{ 
      background:#ffffff; 
      color:#22257a!important; 
     } 

     .navbar ul li a:active{ 
      background:none; 
     } 

.nav-selected{color:#22257a!important; font-weight:700;} 
.navbar a.nav-selected{color:#22257a!important; font-weight:700;} 
.navbar ul li.nav-path-selected .dropdown-toggle{color:#22257a; font-weight:700;} 
/*-------------------------------------------------*/ 

.caret { 
    color: #000000; 
    -webkit-transition: color 0.2s; /* Safari */ 
    transition: color 0.2s; 
} 
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover { 
    background-color: transparent; 
    color: #000000 !important; 
} 

.dropdown-menu { 
    border:1px solid #f1f1f1; 
    border-radius: 0; 
    box-shadow: none; 
    margin-top: -15px; 
    padding:0px 0px; 
} 

.dropdown-menu li { 
    padding: 2px 16px 2px 16px; 
} 

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { 
    background-color: transparent; 
} 

.dropdown-menu a { 
    color: #777777 !important; 
} 

.dropdown-menu > li > a { 
    padding: 8px 14px; 
} 
i { 
    color: white; 
} 
header { 
    width: 100%; 
    height: 50px; 
    background-color: #4d4d4d; 
} 
header p{ 
    color:white; 
} 
header i { 
    float:left; 
    padding-right: 10px; 
} 

Answer 1

당신이 계신 대해 뭔가를 누락하지 않는 한, 당신은 어디서든 일을 배치 할 수 있어야를 이것은 내가 지금 가지고있는 HTML 코드입니다 당신은 CSS를 좋아합니다.

div.logo{ 
    position:absolute; 
    top:0px; 
    left:200px; 
    z-index:2; 
}