title: Zurb-Foundation: Reducing base font size causes toggle-topbar button to display too early
body: <p>I am new to Zurb-Foundation, so bear with me on this question.  </p>
  
  <p>I am monkeying with the top-bar element and want to have the toggle-topbar button for small displays.  I also want to reduce the base font size for the site; but when I set the base font size to 12px in _variables.scss, the toggle-topbar icon shows up way too early, something like 900px or so I guess.  When I leave base font size at 100%, everything works as expected.  My base font size is set in _variables.scss as follows:</p>
  
  <pre><code>$base-font-size: 12px !default;
  $em-base: $base-font-size !default;
  </code></pre>
  
  <p>My html is as follows:</p>
  
  <pre><code>&lt;nav class="top-bar"&gt;
  &lt;ul class="title-area"&gt;
       &lt;li class="name"&gt;
             &lt;h1&gt;@Html.ActionLink("Application name", "Index", "Home")&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;/nav&gt;
  </code></pre>
  
  <p>Is there something else I need to do to make sure that setting my base font size does not corrupt the toggle-topbar setting?</p>