Making a custom navbar with bootstrap

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><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Play Video</a></li>

                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

My Css -

.navbar {
    background: url(../images/patte.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?