Foundation 5.2.3 - Nav Customization

by Adam Blodgett

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/vendor/modernizr.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/js/foundation/foundation.topbar.js"></script>
<nav style="width: 1000px; margin: auto;" class="top-bar" data-topbar role="navigation">
    <ul style="margin-right: 80px;" 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">
        <!-- Left Nav Section -->
        <ul class="left">
            <li class="has-dropdown">
                <a href="#">Find Me</a>
                <ul class="dropdown">
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Steamcommunity</a></li>
                </ul>
            </li>
        </ul>
    </section>
</nav>

CSS

.top-bar-section li:not(.has-form) a:not(.button):hover {
    background: green; 
}

JavaScript

$(document).foundation({

  });