Foundation 5 ships with a dark navigation bar and, unlike Bootstrap, does not have a class to quickly inverse the color scheme. To change the Foundation Top Bar to dark text on a light background, open the _settings.scss file and replace the Top Bar variables section with the settings below.
Not using SASS with Foundation yet? Check out my post on configuring a Foundation Libsass project to get up and running in no time!
// 34. Top Bar
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-top-bar-classes: $include-html-classes;
// Background color for the top bar
$topbar-bg-color: $main-section-bg;
// $topbar-bg: $topbar-bg-color;
// Height and margin
$topbar-height: rem-calc(65);
// $topbar-margin-bottom: 0;
// Controlling the styles for the title in the top bar
// $topbar-title-weight: $font-weight-normal;
// \$topbar-title-font-size: rem-calc(17);
// Style the top bar dropdown elements
$topbar-dropdown-bg: darken($topbar-bg-color, 5%);
$topbar-dropdown-link-color: $jet;
$topbar-dropdown-link-bg: darken($topbar-bg-color, 5%);
$topbar-dropdown-link-bg-hover: darken($topbar-bg-color, 5%);
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
$topbar-dropdown-toggle-color: $jet;
// $topbar-dropdown-toggle-alpha: 0.4;
// Set the link colors and styles for top-level nav
$topbar-link-color: $jet;
$topbar-link-color-hover: $jet;
// $topbar-link-color-active: $white;
// $topbar-link-color-active-hover: $white;
// $topbar-link-weight: $font-weight-normal;
$topbar-link-font-size: rem-calc(15);
// $topbar-link-hover-lightness: -10%; // Darken by 10%
// $topbar-link-bg: $topbar-bg;
$topbar-link-bg-color-hover: $jet;
$topbar-link-bg-hover: darken($topbar-bg-color, 5%);
// $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
// $topbar-link-font-family: $body-font-family;
// $topbar-link-text-transform: none;
// $topbar-link-padding: ($topbar-height / 3);
// $topbar-back-link-size: $h5-font-size;
// \$topbar-link-dropdown-padding: 20px;
// $topbar-button-font-size: 0.75rem;
// $topbar-button-top: 7px;
// $topbar-dropdown-label-color: $monsoon;
// $topbar-dropdown-label-text-transform: uppercase;
// $topbar-dropdown-label-font-weight: $font-weight-bold;
// $topbar-dropdown-label-font-size: rem-calc(10);
// $topbar-dropdown-label-bg: $oil;
// Top menu icon styles
// $topbar-menu-link-transform: uppercase;
$topbar-menu-link-font-size: rem-calc(15);
// $topbar-menu-link-weight: $font-weight-bold;
$topbar-menu-link-color: $jet;
$topbar-menu-icon-color: $jet;
// $topbar-menu-link-color-toggled: $jumbo;
// $topbar-menu-icon-color-toggled: $jumbo;
// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;
// Using rem-calc for the below breakpoint causes issues with top bar
// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: \$medium-up;
// Divider Styles
// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
// Sticky Class
// $topbar-sticky-class: ".sticky";
// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item