5

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.

8
  • have been wondering about this myself as well -- would make a nice PR for the Foundation repo. a JS solution is definitely possible. any ideas so far?
    – Irvin Zhan
    Mar 1, 2014 at 20:19
  • this is where flexbox comes into play. I have a development version in LESS with modernizr help and table fallback here codepen.io/HerrSerker/pen/HthIp.
    – yunzen
    Mar 1, 2014 at 21:00
  • awesome -- didn't see this comment until now. I just posted a solution for this particular problem that closely resembles the table fallback for flexbox
    – Irvin Zhan
    Mar 1, 2014 at 21:16
  • @HerrSerker - Will this work with IE9+? display:flex; is not supported in IE9. Mar 1, 2014 at 23:24
  • I did my best to let it work in non flex browsers. Ie9 supports table css. Its not quite the same, but maybe the best you can get.
    – yunzen
    Mar 2, 2014 at 0:16

3 Answers 3

5
+50

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;
}
2
  • This is great. If combined with the Flexie, or another flexbox polyfill, to support IE9, this will be perfect. Mar 7, 2014 at 20:47
  • @BrettDeWoody I haven't found any polyfills for the current flexbox spec but I think this might work for you: jsfiddle.net/borglinm/x6jvS/13
    – Mathias
    Mar 8, 2014 at 14:22
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?

3
  • Looking good! The spacing appears a little off to me still. And the dropdowns aren't working though I didn't look into it enough to see if that was the CSS or a different issue. Mar 4, 2014 at 0:11
  • 1
    Looks like the JSFiddle that you provided did not include initializing Foundation. Added jsfiddle.net/x6jvS/7 into an edit to update the question!
    – Irvin Zhan
    Mar 4, 2014 at 0:54
  • maybe also set the li's width to 1%, set a certain height to the topbar and (if you want absolute even distribution) position the links absolutely? (haven't tested)
    – ravb79
    Mar 5, 2014 at 11:33
0

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><a href="#"></a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="full-width web button-group large-block-grid-6">
  <li><a href="#">Link 1</a></li>
  <li class="has-dropdown">
    <a href="#">Long Link 2</a>
    <ul class="dropdown">
      <li><a href="#">First link in dropdown</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Even Longer Link 5</a></li>
  <li><a href="#">Link 6</a></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

1
  • When I view the jsFiddle the nav items don't evenly distribute across the full width. They're aligned to the left. Mar 27, 2014 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.