Bootstrap nav/header, dividers, logo

Question

I have a question: I want to make a nav menu in Bootstrap like this

made in Photoshop but what is the easiest way to place the logo like you see in this image. (The black section is an slideshow) And I also want to know what is the easiest way to make the menu like this with the dividers between the menu items. This is the HTML code I have right now:

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

and here the 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

Unless I'm missing something about what you're after, you should be able to position things anywhere you like with CSS.

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