Foundation 5 Top-Bar Blue

by Charles Butler

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic"></script>
<nav class="top-bar" data-topbar role="navigation">
    <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="right">
            <li class="active"><a href="#">Right Button Active</a>
            </li>
            <li class="has-dropdown"> <a href="#">Right Button Dropdown</a> 
                <ul class="dropdown">
                    <li><a href="#">First link in dropdown</a>
                    </li>
                    <li class="active"><a href="#">Active link in dropdown</a>
                    </li>
                </ul>
            </li>
        </ul>
        <!-- Left Nav Section -->
        <ul class="left">
            <li><a href="#">Left Nav Button</a>
            </li>
        </ul>
    </section>
</nav>

CSS

body {
    padding: 0px;
}
/* Wrapped around .top-bar to contain to grid width */
 .contain-to-grid {
    width: 100%;
    background: #EA3E33;
}
.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: 45px;
}
.top-bar {
    overflow: hidden;
    height: 45px;
    line-height: 45px;
    position: relative;
    background: #EA3E33;
    margin-bottom: 0;
}
.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.8rem;
    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: 45px;
    margin: 0;
    font-size: 16px;
}
.top-bar .name h1 {
    line-height: 45px;
    font-size: 1.0625rem;
    margin: 0;
}
.top-bar .name h1 a {
    font-weight: normal;
    color: white;
    width: 75%;
    display: block;
    padding: 0 15px;
}
.top-bar .toggle-topbar {
    position: absolute;
    right: 0;
    top: 0;
}
.top-bar .toggle-topbar a {
    color: white;
    text-transform: uppercase;
    font-size: 0.8125rem;
    font-weight: bold;
    position: relative;
    display: block;
    padding: 0 15px;
    height: 45px;
    line-height: 45px;
}
.top-bar .toggle-topbar.menu-icon {
    top:...

JavaScript

$(document).foundation();