Need help with creating a Bootstrap nav menu similar to this design made in Photoshop? Wondering about the best way to position the logo and create dividers between menu items like shown in this image. Here's the HTML code currently being used:
<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><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01686f676e416c60686d2f6f6d">[email protected]</a></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;
}
...