Foundation Fixed Nav For All

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/normalize.min.css">
<!-- Top Bar Nav ------------------------------------------------------------------------------------------------------------------>
<section class="navigation-section fixed ">
    <div class="row show-for-large-up">
        <div class="large-12 columns">
            <nav class="top-bar" data-topbar>
                <ul class="title-area">
                    <li class="name">
                         <h1></h1>

                    </li>
                </ul>
                <section class="top-bar-section">
                    <ul class="left">
                        <li class="active"><a href="index.html">Home</a>
                        </li>
                        <li class="has-dropdown"> <a href="blog.html">Blog</a>

                            <ul class="dropdown">
                                <li><a href="blog.html">Archive</a>
                                </li>
                                <li><a href="post.html">Single</a>
                                </li>
                            </ul>
                        </li>
                        <li class="has-dropdown"> <a href="page.html">Page</a>

                            <ul class="dropdown">
                                <li><a href="page.html">Full-wdith</a>
                                </li>
                                <li><a href="sidebar-left.html">Left Sidebar</a>
                                </li>
                                <li><a href="sidebar-right.html">Right Sidebar</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="portfolio.html">Portfolio</a>
                        </li>
                        <li class="has-dropdown"> <a href="#">Dropdown</a>

    ...

CSS

.off-canvas-fixed {
    -webkit-transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease;
    height:100%;
}
.move-right > .off-canvas-fixed {
    -webkit-transform: translate3d(15.625rem, 0, 0);
    transform: translate3d(15.625rem, 0, 0);
    height:100%;
}
.left-off-canvas-menu {
    -webkit-transform: none;
    transform: none;
    margin-left: -15.625rem;
    height: 100%;
}
.main-section {
    padding:45px 0 0;
}
.tab-bar {
    width:100%;
}
@media only screen and (orientation:landscape) and (max-width: 64em){
    .main-section {
        padding:0 0 0 2.8125rem;
    }
    .off-canvas-fixed {
        width:2.8125rem;
        height:100%;
        background:#333333;
    }
     section.left-small{
        border:none;
        box-shadow:none;
    }
}

JavaScript

$(document).foundation();