Broken Zurb Foundation 4 responsive navbar menu icon

Question

I'm using the latest zurb-foundation gem for a Ruby project. My navbar should be responsive and show a Menu with 3 horizontal bars when the screen width is small enough. I'm getting it to show the words "Menu", but not the horizontal bars. When the Menu is expanded, the styling further off.

Expanded navbar: http://d.pr/i/RtoO

I was able to reproduce this in jsfiddle using the css and js used by my project (only jQuery and Zurb Foundation stuff for now). http://jsfiddle.net/UvL7e/

Is my markup wrong? I don't have any custom CSS for the navbar yet and am not using any other css libraries.

The SCSS file I use for foundation is below (mostly defaults):

//
// Foundation Variables
//

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with brower-based text zoom or user-set defaults.
$base-font-size: 100% !default;

// $base-line-height is 24px while $base-font-size is 16px
// $base-line-height: 150%;

// This is the default html and body font-size for the base em value.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be a different size and not have it effect grid size too,
// set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
$em-base: 16px !default;

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
@function emCalc($pxWidth) {
  @return $pxWidth / $em-base * 1em;
}

// Colors

$primary-color: #2ba6cb;
$secondary-color: #e9e9e9;
$alert-color: #c60f13;
$success-color: #5da423;

// Make sure border radius matches unless we want it different.

$global-radius: 3px;

// Media Queries

$small-screen: emCalc(768px);
$medium-screen: emCalc(1280px);
$large-screen: emCalc(1440px);

//
// Form Variables
//

// Base for lots of form spacing and positioning styles

// $form-spacing: emCalc(16px);

// Labels

$form-label-pointer: pointer;
$form-label-font-size: emCalc(14px);
$form-label-font-weight: 500;
$form-label-font-color: lighten(#000, 30%);
$form-label-bottom-margin: emCalc(3px);
$input-font-family: inherit;
$input-font-color: rgba(0,0,0,0.75);
$input-font-size: emCalc(14px);
$input-bg-color: #fff;
$input-focus-bg-color: darken(#fff, 2%);
$input-border-color: darken(#fff, 20%);
$input-focus-border-color: darken(#fff, 40%);
$input-border-style: solid;
$input-border-width: 1px;
$input-disabled-bg: #ddd;
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);

// Button background
$button-bg-color: #D8E1ED;

// Button text styles.

// $button-font-family: inherit;
// $button-font-color: #fff;
// $button-font-color-alt: #333;
$button-font-med: emCalc(16px);
// $button-font-tny: emCalc(11px);
// $button-font-sml: emCalc(13px);
// $button-font-lrg: emCalc(20px);
// $button-font-weight: bold;
// $button-font-align: center;

// Various hover effects.

$button-function-factor: 10%;

// Button border styles.

$button-border-width: 1px;
$button-border-style: solid;
$button-border-color: darken($primary-color, $button-function-factor);

// Radius used throughout the core.

$button-radius: 6px;

// Opacity for disabled buttons.

$button-disabled-opacity: 0.6;

//
// Top Bar Variables
//

// Background color for the top bar

$topbar-bg: #222;

// Height and margin

// $topbar-height: 45px;
$topbar-margin-bottom: emCalc(30px);

// Input height for top bar

$topbar-input-height: 2.45em;

// Title in the top bar

$topbar-title-weight: bold;
$topbar-title-font-size: emCalc(17px);

// Link colors and styles for top-level nav

$topbar-link-color: #fff;
$topbar-link-weight: bold;
$topbar-link-font-size: emCalc(13px);
$topbar-link-hover-lightness: -50% !default; // Darken by 30%

// Top bar dropdown elements

// $topbar-dropdown-bg: #333;
// $topbar-dropdown-link-color: #fff;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: #fff;
// $topbar-dropdown-toggle-alpha: 0.5;
// $dropdown-label-color: #555;

// Top menu icon styles

$topbar-menu-link-transform: uppercase;
$topbar-menu-link-font-size: emCalc(13px);
$topbar-menu-link-weight: bold;
$topbar-menu-link-color: #fff;
$topbar-menu-icon-color: #fff;
$topbar-menu-link-color-toggled: #888;
$topbar-menu-icon-color-toggled: #888;

// Transitions and breakpoint styles

$topbar-transition-speed: 900ms;
$topbar-breakpoint: $small-screen;
$topbar-media-query: "only screen and (min-width: "#{$topbar-breakpoint}")";

@import 'foundation';

Answer 1

It's pretty easy, your class name has to be changed.
From:

<li class="toggle-topbar menu-item">
  <a href="#">
    <span>Menu</span>
  </a>
</li>

To:

<li class="toggle-topbar menu-icon">
  <a href="#">
    <span>Menu</span>
  </a>
</li>

See http://jsfiddle.net/Volker_E/mxmJt/2/

I've added the yellow border on top, so the result label doesn't overlap the menu icon.