Foundation 5 - Evenly-spaced Top Bar nav items - css

Question

Zurb Foundation's top-bar is extremely useful. It works great as a main navigation for a site/app, and collapses to a mobile-friendly format on smaller devices.
Its one major shortcoming is the ability to make the top-bar full-width with evenly spaced nav items. Is there a way to make the top-bar full-width and the nav items evenly spaced?
Example
If the top-bar has 6 nav items (width varying length titles) and we're using the default width of 1000px for .rows (with 15px gutters) the 6 nav items should evenly space themselves across the 970px top-bar. The first and last nav items should be left and right justified respectively.
As the screen size reduces the nav items should shrink in width to maintain their even spacing until the $topbar-breakpoint causes the top-bar to collapse to the mobile format.
Requirements
The solution should be CSS-based.
The solution should match Foundation 5's compatibility chart. Namely this means it needs to support IE9+.
Beneath the $topbar-breakpoint the top-bar should work as normal.
Here's a jsFiddle with the Foundation 5 resources already loaded.

Answer 1

Here is another solution. It is based on flexbox which hasn't been supported by browser for very long and it is still only a candidate recommendation: CSS Flexible Box Layout Module
jsFiddle
If you provide a good fallback, like the original Foundation CSS it can be used.
Update
You could also use this jQuery solution as a fallback as I haven't found any polyfills for flexbox: http://jsfiddle.net/borglinm/x6jvS/14/
.top-bar-section > ul {
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
}
.top-bar-section > ul > li {
float: none;
-webkit-flex: 1;
-moz-flex: 1;
flex: 1;
}
.top-bar-section > ul > li > a {
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
overflow: hidden;
}

Answer 2

Here's a solution that might need a bit of tweaking
JSFiddle Here
Sticking to the CSS-only requirements, the only feasible way I can think of is using CSS tables. We create nested table, table-rows and table-cells. The table-cells, by default, will try to maintain equal spacing between itself and other table-cells.
The table-row needs to span the entire topbar minus any Foundation topbar title-areas. To do this, we use an overflow: hidden trick to make the .top-bar-section span the remaining width of the topbar. Finally, we wrap our topbar with a div that has display: table and spans its parent.
Here's the relevant CSS
.top-bar-section {
overflow: hidden;
}
.center-topbar {
display: table;
width: 100%;
}
.center-topbar .full-width {
display: table-row;
}
.center-topbar .full-width li {
display: table-cell;
float: none;
text-align: center;
}
What we are left is with a topbar whose elements are centered and have widths that vary depending on its contents. The $topbar-breakpoint works as normal as well.
Improvements?
Works on Chrome + Safari well on my end (OS X). For Firefox, the dropdown arrow is not displaying due to the removal of the left float. Just wanted to post this to get the conversation going. Anyone have any improvements?

Answer 3

Here's a solution using some built in foundation classes...basically I added 4 classes to your fiddle.
http://jsfiddle.net/x6jvS/7/
<div class="row">
<div class="small-12 columns">
<nav class="top-bar contain-to-grid" data-topbar>
<ul class="title-area">
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="full-width web button-group large-block-grid-6">
<li>Link 1</li>
<li class="has-dropdown">
Long Link 2
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Even Longer Link 5</li>
<li>Link 6</li>
</ul>
</section>
</nav>
</div>
</div>
added class "contain-to-grid" to the nav element
added classes "web button-group large-block-grid-6" to the "section.top-bar-section > ul" (first ul in that section)
and blammo...seems to work fairly well cross-browser