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>
<div class="head-bar">
<div class="row">
        <div class="large-6 medium-6 small-12 columns">
        <ul class="list-left">
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul> 
    </div>
        <div class="large-6 medium-6 small-12 columns">
        <ul class="list-right">
<li><a href="#">About</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Conact</a></li>
</ul> 
    </div>
</div>
</div>
    <div class="sticky contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
    <ul class="title-area">
        <li class="name">
             <h1><a href="#"><i class="fa fa-home"></i></a></h1> 
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a>

        </li>
    </ul>
    <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="left">

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

                <ul class="dropdown">
                    <li><a href="#">Home Edition
                </a>

                    </li>
             ...

CSS

body {
    background: #EDEDED url(http://wallpapers55.com/wp-contfent/uploads/2014/03/amazing-new-york-city-manhattan-skyline-usa.jpg);    
    background-size: cover;
    overflow-x: hidden;
    min-height:900px;
}

.head-bar {
    background: none repeat scroll 0% 0% #161F32;
    color: #C7D0D8;
    padding: 10px;
    font-size: 13px;
}

.head-bar ul.list-right
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
}

.head-bar ul.list-right li
{
display: inline;
padding-right: .6em;
}
.head-bar ul.list-right li a
{
font-size: 0.8rem;
    color: #fff;
}
.head-bar ul.list-left
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: left;
}

.head-bar ul.list-left li
{
display: inline;
padding-right: .6em;
}
.head-bar ul.list-left li a
{
font-size: 0.8rem;
    color: #fff;
}
.cover-groadient {
background: linear-gradient(#00A5D5 0px, #00BC95 100%) repeat scroll 0% 0% transparent;
    opacity: 0.85;
        z-index:-1;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}



/* Wrapped around .top-bar to contain to grid width */
 .contain-to-grid {
    width: 100%;
    background: #FFFFFF;
}
.contain-to-grid .top-bar {
    margin-bottom: 0;

}

.sticky {
                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);

}
.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: #FFFFFF;
    margin-bottom: 0;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);

}

.top-bar ul {
    margin-bottom: 0;
    list-style: none;
}
.top-bar .row {
    max-width:...

JavaScript

$(document).foundation();

$(document).ready(function () {
    $("#s-spinner").hide();
    $("#hide").click(function () {
        setTimeout(function () {
            jQuery("#hide").hide();
        }, 0);
        setTimeout(function () {
            jQuery("#s-spinner").show();
        }, 0);
        setTimeout(function () {
            jQuery("#s-spinner").hide();
        }, 2000);
        setTimeout(function () {
            jQuery("#hide").show();
        }, 2000);
    });
});