Foundation 5.5.0 Custom Topbar

by Charles Butler

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"></script>
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
    <ul class="title-area">
        <li class="name">
             <h1><a href="#">My Site</a></h1> 
        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>

        </li>
    </ul>
    <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="left">
            <li class="has-dropdown"><a href="#">Products</a>

                <ul class="dropdown">
                    <li><a href="#">Home Edition
                </a>
                    </li>
                    <li><a href="#">Business Edition</a>
                    </li>
                    <li><a href="#">Professional Edition</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="#">See all →</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Experience</a>
            </li>
            <li><a href="#">Support</a>
            </li>
        </ul>
    </section>
</nav>

CSS

/* Wrapped around .top-bar to contain to grid width */
 .contain-to-grid {
    width: 100%;
    background: #FAFAFA;
}
.contain-to-grid .top-bar {
    margin-bottom: 0;
}
.fixed {
    width: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 99;
}
.fixed.expanded:not(.top-bar) {
    overflow-y: auto;
    height: auto;
    width: 100%;
    max-height: 100%;
}
.fixed.expanded:not(.top-bar) .title-area {
    position: fixed;
    width: 100%;
    z-index: 99;
}
.fixed.expanded:not(.top-bar) .top-bar-section {
    z-index: 98;
    margin-top: 3.125rem;
}
.top-bar {
    overflow: hidden;
    height: 3.125rem;
    line-height: 3.125rem;
    position: relative;
    background: #FAFAFA;
    margin-bottom: 0;
    -moz-box-shadow: 0 1px 0 0 #DFDFDF, -1px 0 0 0 #DFDFDF, 1px 0 0 0 #DFDFDF;
    -webkit-box-shadow: 0 1px 0 0 #DFDFDF, -1px 0 0 0 #DFDFDF, 1px 0 0 0 #DFDFDF;
    box-shadow: 0 1px 0 0 #DFDFDF, -1px 0 0 0 #DFDFDF, 1px 0 0 0 #DFDFDF;
}
.top-bar ul {
    margin-bottom: 0;
    list-style: none;
}
.top-bar .row {
    max-width: none;
}
.top-bar form, .top-bar input {
    margin-bottom: 0;
}
.top-bar input {
    height: 1.75rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
    font-size: 0.75rem;
}
.top-bar .button, .top-bar button {
    padding-top: 0.4125rem;
    padding-bottom: 0.4125rem;
    margin-bottom: 0;
    font-size: 0.75rem;
}
@media only screen and (max-width: 40em) {
    .top-bar .button, .top-bar button {
        position: relative;
        top: -1px;
    }
}
.top-bar .title-area {
    position: relative;
    margin: 0;
}
.top-bar .name {
    height: 3.125rem;
    margin: 0;
    font-size: 16px;
}
.top-bar .name h1, .top-bar .name h2, .top-bar .name h3, .top-bar .name h4, .top-bar .name p, .top-bar .name span {
    line-height: 3.125rem;
    font-size: 1.0625rem;
    margin: 0;
}
.top-bar .name h1 a, .top-bar .name h2 a, .top-bar .name h3 a, .top-bar .name h4 a, .top-bar .name p a, .top-bar .name span a {
    font-weight: normal;
   ...

JavaScript

$(document).foundation();