title: Foundation - Top Bar and Icon Bar in one template
body: <p>I'm working on <code>Foundation Zurb</code> template and I'm trying to get it working. 
  I have <code>Top Bar</code> at the top of the screen <em>(full width)</em>, <code>Icon Bar</code> at the left side <em>(full height)</em>. I know that Foundation has 12 grid system.</p>
  
  <p>According to Foundation:</p>
  
  <blockquote>
    <p>The Foundation Top Bar gives you a great way to display a complex
    navigation bar on small, medium or large screens.</p>
  </blockquote>
  
  <p>And:</p>
  
  <blockquote>
    <p>An Icon Bar provides a menu to quickly navigate an app. Use the Icon
    Bar horizontally or vertically, with the labels below the icons or to
    the right. Have it your way.</p>
  </blockquote>
  
  <p><img src="https://i.stack.imgur.com/IsxV5.png" alt="Screenshot"></p>
  
  <p>Here is my template. I've took out div.large-9.columns etc.. Because they were braking the view. </p>
  
  <pre><code>  &lt;!-- Navigation --&gt;
    &lt;nav class="top-bar" data-topbar role="navigation"&gt;
      &lt;ul class="title-area"&gt;
        &lt;li class="name"&gt;
          &lt;h1&gt;&lt;a href="#"&gt;LOGO PLACEHOLDER&lt;/a&gt;&lt;/h1&gt;
        &lt;/li&gt;
        &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;span&gt;Menu&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;section class="top-bar-section"&gt;
  
        &lt;!-- Right Nav Section --&gt;
        &lt;ul class="right"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="fa fa-diamond"&gt;&lt;/i&gt; Go PRO&lt;/a&gt;&lt;/li&gt;
          &lt;li class="has-dropdown"&gt;
            &lt;a href="#"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; My Account&lt;/a&gt;
            &lt;ul class="dropdown"&gt;
              &lt;li&gt;Some Li's here&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;!-- Left Nav Section --&gt;
        &lt;ul class="left"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-database"&gt;&lt;/i&gt; ONE&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-list-ol"&gt;&lt;/i&gt; TWO&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-users"&gt;&lt;/i&gt; THREE&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/section&gt;
    &lt;/nav&gt;
  
    &lt;!-- Left Nav Sidebar --&gt;
    &lt;div class="icon-bar vertical five-up"&gt;
      &lt;a class="item"&gt;
        &lt;i class="fa fa-home"&gt;&lt;/i&gt;
        &lt;label&gt;Home&lt;/label&gt;
      &lt;/a&gt;
      &lt;a class="item"&gt;
        &lt;i class="fa fa-gamepad"&gt;&lt;/i&gt;
        &lt;label&gt;ONE&lt;/label&gt;
      &lt;/a&gt;
      &lt;a class="item"&gt;
        &lt;i class="fa fa-star"&gt;&lt;/i&gt;
        &lt;label&gt;TWO&lt;/label&gt;
      &lt;/a&gt;
      &lt;a class="item"&gt;
        &lt;i class="fa fa-thumbs-up"&gt;&lt;/i&gt;
        &lt;label&gt;THREE&lt;/label&gt;
      &lt;/a&gt;
      &lt;a class="item"&gt;
        &lt;i class="fa fa-trophy"&gt;&lt;/i&gt;
        &lt;label&gt;FOUR&lt;/label&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I want to achieve:</p>
  
  <ul>
  <li><strong>Top Bar</strong> and <strong>Icon Bar</strong> the same</li>
  <li><strong>Content Area</strong> to be fixed and have <code>large-8</code> or <code>large-9</code></li>
  <li><strong>Sidebar</strong> to be fixed and have <code>large-3</code></li>
  </ul>
  
  <p>What I've already tried:</p>
  
  <ul>
  <li>Was separating all 3 bits with <code>div.large-1/8/3</code>, nothing happened</li>
  <li>Was nesting them into <code>div.row</code></li>
  <li>I think I've tried almost everything, but have no idea, what is the problem.</li>
  </ul>