off canvas navigation foundation hook up problems

Question

I am having trouble hooking up the off canvas navigation for foundation 5. It is not displaying the list and the tab bar jumps down a few margin when off canvas navigation is active.

Here is my html markup:

<div class="marketing off-canvas-wrap">
<div class="inner-wrap">
<!--

-->
<div class="fixed">
    <nav class="top-bar docs-bar hide-for-small" data-topbar>
        <ul class="title-area">
            <li class="name">
        <h1><a href="index.html">website</a></h1>
            </li>
    </ul>

        <section class="top-bar-section">
            <ul class="right">
                <li><a href="#">home</a></li>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Contact</a></li>
        </ul>
    </section>
    </nav>
<!--
-->
<nav class="tab-bar show-for-small">
    <a class="left-off-canvas-toggle menu-icon">
<aside class="left-off-canvas-menu">
<ul class="title-area">
            <li class="name">
        <h1><a href="index.html">website</a></h1>
<ul class="off-canvas-list">
<li><a href="#">home</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Contact</a></li>

</ul>
</aside>
<a class="exit-off-canvas" href="#"></a>
</nav>
</div>
<!--
-->

CSS:

.top-bar{
padding-top:20px;
padding-right:20px; 
padding-left:20px;
}



.top-bar-section ul,
.top-bar-section ul li,
.top-bar-section ul li.active > a,
.top-bar-section li a:not(.button),
.top-bar-section li a:not(.button):hover,
.top-bar-section ul li.active > a:hover {
font-family: 'Playfair Display SC', serif;
background: white;
color: black;  
}

.tab-bar,
.tab-bar ul, li{
padding: 0,0;
margin: 0,0;
background:white;
color: black;
}