Foundation 5 Top-Bar Blue with Search

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>
<div class="break"></div>
    <div class="row">
   <div class="large-12 columns">
      <div class="contain-to-grid sticky">
         <nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false sticky_on: large">
            <ul class="title-area">
               <li class="name">
                  <img src="img/logo.png" alt="">
               </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><a href="#">Home</a></li>
                  <li class="has-dropdown">
                     <a href="#">Products</a> 
                     <ul class="dropdown">
                        <li><a href="#">Product 1</a></li>
                        <li><a href="#">Product 2</a></li>
                     </ul>
                  </li>

                  <li class="active"><a href="#"><i class="fa fa-shopping-cart"></i> 0 items</a></li>
               </ul>
                
            </section>
            <ul class="right has-search">
               <li class="has-form">
                  <div class="row collapse">
                     <div...

CSS

body {
    padding: 0px;
    height: 1200px;
}
.break {min-height:120px; }

/* Wrapped around .top-bar to contain to grid width */
 .contain-to-grid {
    width: 100%;
    background: #31353D;
}
.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: #31353D;
    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 {
width:100%;
    height: 45px;
    line-height: 45px;
    padding-top: 0;
    padding-bottom: 0;
box-shadow: none;
border:none;
outline: none;
    font-size: 0.75rem;
color: #666;
background: #272A31;
}

.top-bar input:focus {
box-shadow: none;
border:none;
outline: none;
color: #FFF;
background: #272A31;
}


.top-bar .button, .top-bar button {
    height: 45px;
    line-height: 45px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 1.3rem;
border:none;
outline: none;
background: #272A31;
}

.top-bar .button:hover, .top-bar button:hover {
background: #272A31;
}

ul.has-search {
    display:table;
    width: 100%;    
 }

ul.has-search li{
    display: table-cell; 
 }

ul.has-search li a{
    display: block;
 }




@media only screen and (max-width: 40em) {
    .top-bar .button, .top-bar button {
        position: relative;
        top: 0;
    }
}
.top-bar .title-area {
    position: relative;
    margin: 0;
}
.top-bar .name {
    height: 45px;
    margin: 0;
    font-size: 16px;
}
.top-bar...

JavaScript

$(document).foundation();

jQuery(document).ready(function($){
	var smallWindow = false;

	$(window).scroll(function() {
		var scroll = $(window).scrollTop();

		if (scroll >= 50) {
			$('#logo-image').attr('src', 'img/Acme_Monogram_Colour.png')
			$(".important-class").addClass("padding-on-my-header");
		}
		if (scroll < 50) {
			$(".important-class").removeClass("padding-on-my-header");
			$('#logo-image').attr('src', 'img/Acme_Colour.png')
		}
	}).resize(function(){
		if ( !smallWindow && this.innerWidth <= 1024 ) {
			smallWindow = true;
			$('.top-bar-section').find('ul.right').hide(0).delay(500).show(0);
		}
		if ( smallWindow && this.innerWidth > 1024 ) {
			smallWindow = false;
		}
	});
});