Making a custom navbar with Bootstrap - css

Question

I want to make a custom navbar as shown in the image I mocked up.
I've written this so far -
My HTML:
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Events</li>
<li>Contact</li>
<li>Play Video</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
My CSS:
.navbar {
background: url(../images/pattern.png) repeat;
background-color: white;
}
.navbar-brand,
.navbar-nav li a {
font-family: 'Josefin Sans';
font-size: 14px;
font-weight: 700;
line-height: 80px;
height: 80px;
padding-top: 0;
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
letter-spacing: .1em;
color: #808080;
}
This looks like a normal navbar should. I don't know how to position the "Play Video" part and the links(home, about etc.) part with a separator in between them. Any ideas on how I should proceed?

Answer 1

Play Video
add any class to this li for example
<li class="play">Play Video</li>
Nex writee this code
.play::before {
color: gray;
content: "|";
float: left;
margin-right: 23px;
}
and put play icon/image in this list item e.g
<li class="play"><img src="play-icon.png"> Play Video</li>
//place play icon path on play-icon.png place
Hope this would help. Thanks