Zurb-Foundation: Reducing base font size causes toggle-topbar button to display too early

Question

I am new to Zurb-Foundation, so bear with me on this question.

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:

$base-font-size: 12px !default;
$em-base: $base-font-size !default;

My html is as follows:

<nav class="top-bar">
<ul class="title-area">
     <li class="name">
           <h1>@Html.ActionLink("Application name", "Index", "Home")</h1>
      </li>
      <li class="toggle-topbar menu-icon">
            <a href="#"><span>Menu</span></a>
       </li>
</ul>
</nav>

Is there something else I need to do to make sure that setting my base font size does not corrupt the toggle-topbar setting?

I'd say since you change the $em-base (which is used to calculate dimensions for media queries via emCalc) you basically tweak the whole responsive behaviour (breakpoint results). If you want to have just smaller base font, you could try having $em-base like that: $em-base: 16px !default; (I have it like that in foundation out of the box). OR you can add a fixed value to _top-bar.css in this line $topbar-breakpoint: emCalc(940px) !default; meaning, that instead of using emCalc you just set 940px explicitly. Though I would go with the first solution. — vlad saling
@vladsaling Thank you for your help! I was aware of how the em-base and font-base values interacted with each other and specifically set the two equal as recommended in the comments in the _variables file to keep the grid size in sync with the base font. Otherwise as you shrink the font size, the actual real-estate used by the grid shrinks significantly which is not what I wanted. — Gustyn

Gustyn Gustyn · Accepted Answer · 2013-11-03T17:49:51

I am going to mark this question as answeres because I learned (as I normally do in these situations) that the problem was in my expectations, not the functionality.

Basically, the menu icon appears at width 768px which is as designed. I was thinking it would be at a smaller number. I imagine at somt Zurb Foundation will provide more breakpoint options or I will have to do it myself.

Zurb-Foundation: Reducing base font size causes toggle-topbar button to display too early

1 Answers