<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container example-two">
<div class="title">Nav only scrolling</div>
<header class="example-two-header">
<span class="logo">Logo</span>
<nav class="vertical-align-middle scroll">
<span class="nav-item">Show Home</span>
<span class="nav-item">Cast</span>
<span class="nav-item">Episodes</span>
<span class="nav-item">Videos</span>
</nav>
</header>
</div>
body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;color: #64cce3;line-height: 1.5;}
.title {margin: 24px 0 6px;font-size: 12px;text-transform: uppercase;letter-spacing: .2em;color: #999;}
.example-two-header {border-radius: 3px;}
header {background: #152637;}
header, nav {font-size:0;}
header, nav {display:block;}
.example-two-header .logo {width: 25%;}
.logo, .nav-item, .vertical-align-middle {display: inline-block;vertical-align: middle;}
.logo, .nav-item {font-size: 14px;}
.logo {text-align: center;font-weight: 700;color: #727c87;border-right: 1px solid rgba(114, 124, 135, 0.4);padding: 12px 24px 13px;}
.example-two-header nav {width: 75%;}
.scroll {white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar;}
.nav-item:not(:last-child) {border-right: 1px solid rgba(114, 124, 135, 0.2);}
.nav-item {padding: 12px 16px 13px;}
.container{width:360px;}
.scroll::-webkit-scrollbar{display:none;}
.scroll{-ms-overflow-style:none;scrollbar-width:none;}
