Top Bar Nav with Centered Logo

<!-- mobile nav bar -->
<div class="title-bar topbar-center-logo-mobile" data-responsive-toggle="topbar-center-logo" data-hide-for="medium">
  <div class="title-bar-left">
    <div class="title-bar-title"><img src="https://placehold.it/100x39" alt="" /></div>
  </div>
  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-toggle="topbar-center-logo"></button>
  </div>
</div>
<!-- /mobile nav bar -->

<!-- medium and larger nav bar -->
<div class="top-bar topbar-center-logo" id="topbar-center-logo">
  <div class="top-bar-left">
    <ul class="menu vertical medium-horizontal">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-center">
    <a href="#"><img src="https://placehold.it/100x39" alt="" /></a>
  </div>
  <div class="top-bar-right">
    <ul class="menu vertical medium-horizontal">
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>
      <li><a href="#">Six</a></li>
    </ul>
  </div>
</div>
<!-- /medium and larger nav bar -->