Foundation 6 - Top-Bar | How can I keep the logo on smaller devices?

Question

I try to create a responsive top-bar with logo, left menu and right menu. On mobile devices I want the horizontal menu to become a vertical menu under a "hamburger icon".

I want the logo to remain always visible. For mobile devices to the left of the hamburger icon. Also add icons.

I checked the example from Zurb, but I don't want the logo/site-title to go inside the hamburger menu on smaller screen.

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
</div>
<div class="top-bar">
    <li><img src="" > </li>
<div  id="main-menu">
  <div class="top-bar-left">

    <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
          <li><a href="#">Albums</a></li>
          <li><a href="#">Music</a></li>
            <li><input type="search" placeholder="Search"></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="dropdown vertical medium-horizontal menu">
      <li><a href="#">Contact</a></li>
      <li><a href="#">Logout</a></li>
    </ul>
  </div>
</div>
</div>
</div>

I want to achieve the following result (it was done with bootstrap)

Answer 1

You can make the image in the small screen different in this case (smaller if needed). The Foundation 6 docs are not that great yet so here is a pretty good implementation of your code. Be sure to include the background-color of your bar. Not much extra css necessary.

    <div class="title-bar" style="width:100%;background-color: #262626;">
        <div class="title-bar-left hide-for-medium">
            <span class="title-bar-title"><img src="http://placehold.it/80x40?text=Viberr" ></span>
            <button data-responsive-toggle="responsive-menu" class="menu-icon" type="button" ></button>
        </div>

        <div id="responsive-menu" >
            <div class="top-bar-title">
                <img src="http://placehold.it/80x40?text=Viberr" >
            </div>

            <div class="top-bar-left">
                <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
                    <li><a href="#">Albums</a></li>
                    <li><a href="#">Music</a></li>
                    <li><input type="search" placeholder="Search"></li>
                </ul>
            </div>

            <div class="top-bar-right">
                <ul class="dropdown vertical medium-horizontal menu">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </div>
        </div>

    </div>