Veeva Active Nav

Place the Javascript into the appropriate template.

HTML

<nav class="menu-desktop hidden-xs hidden-sm col-md-9" role="navigation">
    <ul class="top-menu">
        <li class="menu-products">
            <a href="#">Products</a>
		</li>
        <li class="menu-services">
            <a href="#">Services</a>
		</li>
        <li class="menu-customers">
            <a href="#">Customers</a>
		</li>
        <li class="menu-resources">
            <a href="#">Resources</a>
		</li>
        <li class="menu-events">
            <a href="https://www.facebook.com/" target="_blank">Events</a>
		</li>
        <li class="menu-about-veeva">
            <a href="#">About Veeva</a>
		</li>
    </ul>
</nav>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700);

nav {
    line-height: 50px;
    height: 50px;
    position: absolute;
    top: 10px;             /* 37px */
    margin-left: 0;        /* 176px */
    padding-right: 85px;
}
nav ul {
    font-size: 1.4rem;
    list-style-type: none;
    padding: 0;
    display: table;
    width: 100%;
}
nav ul li {
    display: table-cell;
    height: 50px;
    line-height: 50px;
    vertical-align: top;
    white-space: nowrap;
    text-align: center;
    border-left: 22px solid transparent;
}
nav ul li:first-child {
    border-left: 0px;
}
nav ul li a {
    height: 50px;
    font: 100% "Roboto", sans-serif;
    font-weight: 300;
    font-size: 14px; /* 1.4rem */
    line-height: 50px;
    display: block;
    padding: 0 24px;
    color: #231f20;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    list-style: none;
}
nav ul li a.active {
    color: #f8991d;
}
nav ul li:hover > a,
nav ul li:hover > a.active {
    background: #f8991d;
    color: #FFF;
}