How to make the logo that overlaps top bar and slider in foundation 5

I tried to put the logo (on the top left corner) on top of both the top bar and the slider, but I just can't figure out how to make that works. I just want the logo sitting on top of the top bar and the slider when the webpage is mobile size or desktop size.

enter code here

http://codepen.io/edkai/pen/pJvoPN

Is there anyone can help with that? much appreciated..

Solution

You can add an another ul with left class in your section

<section class="top-bar-section">
    <ul class="left">
        <li class="name">
            <a href="">
                <img class="logo" src="http://cn-thai.co.th/en/wp-content/uploads/2012/06/dummy-logo-300x300.png" alt="">
            </a>  
        </li>
    </ul>
    <ul class="right">
        <li><a href="index.html">Home</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="reservation.html">reservation</a></li>
        <li><a href="contact.html">contact</a></li>
    </ul>
</section>