Foundation 5 Top Bar WHITE

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">
<div class="contain-to-grid sticky">
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false, scrolltop : false">
   <ul class="title-area">
      <li class="name">
          <a href="#"><img src="img/logo.png" alt="OptimaHost" /></a>
      </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><a href="#">Home</a></li>
                   <li class="divider"></li>

         <li class="has-dropdown">
            <a href="#">Hosting Plans</a> 
            <ul class="dropdown">
  			<li><a href="tpl-hosting.html">Shared Hosting</a></li>
  			<li><a href="tpl-dedicated.html">Dedicated Servers</a></li>
  			<li><a href="tpl-cloud.html">Cloud Services</a></li>
  			<li><a href="tpl-domain.html">Domain Registry</a></li>
  			<li><a href="tpl-reseller.html">Reseller Plans</a></li>
            </ul>
         </li>
                             <li class="divider"></li>

         <li class="has-dropdown">
            <a href="#">Pages</a> 
            <ul class="dropdown">
  			<li><a href="tpl-about.html">About Us</a></li>
  			<li><a href="tpl-knowledge-base.html">Knowledge Base</a></li>
                                <li><a href="tpl-testimonials.html">Testimonials</a></li>
  			<li><a...

JavaScript

$(document).foundation();