title: Zurb Foundation Top Bar with simple text and links?
body: <p>I'm trying to pull off the following Top Bar with Zurb Foundation.</p>
  
  <p><em>(I'm aware of how to do this with plain HTML...trying to figure out the correct way to do it using Foundation, though.)</em></p>
  
  <p><img src="https://f.cloud.github.com/assets/35243/1427404/1174487e-4089-11e3-9843-6ca147297f2f.png" alt="topbar_example"></p>
  
  <p>So you've got the title-area name on the left (which works fine), and on the right the "Hi, Joe!" is just plain text and then the "Change Settings" and "Log out" are each links (which doesn't work).</p>
  
  <p>Here's what's happening when I build that out...</p>
  
  <p><img src="https://f.cloud.github.com/assets/35243/1427455/91c05b7a-408a-11e3-8a2f-cb439cbc0ff0.png" alt="topbar_example_002"></p>
  
  <p>And here's the code I'm using...</p>
  
  <pre><code>&lt;nav class="top-bar"&gt;
    &lt;ul class="title-area"&gt;
      &lt;li class="name"&gt;&lt;h1&gt;&lt;a href="#"&gt;Acme Company&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt;
      &lt;li class="toggle-topbar"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;section class="top-bar-section"&gt;
      &lt;ul class="right"&gt;
        &lt;li&gt;Hi, Joe!&lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Change Settings&lt;/a&gt; | &lt;a href="#"&gt;Log out&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>So how can I get Foundation to work with my original design example above?</p>