破碎的Zurb基金会4响应式导航栏菜单图标

Question

我正在使用最新的zurb-foundation创业板的Ruby项目。当屏幕宽度足够小时，我的导航栏应该是响应式的，并显示带有3个水平条的菜单。我得到它显示单词“菜单”，但不是单杠。菜单展开时，样式进一步关闭。

压缩扩大导航栏： http://d.pr/i/RtoO

我能够使用我的项目中使用的CSS和JS转载本文中的jsfiddle（仅jQuery和Zurb基金会的东西现在）。 http://jsfiddle.net/UvL7e/

我的标记错了吗？我还没有任何自定义CSS的导航栏，并没有使用任何其他的CSS库。

我使用基础的SCSS文件如下（大部分是默认）：

// 
// 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

这是很容易，你的类名已被改变。
来源：

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

要：

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

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

我已经添加在上面的黄色边框，所以导致标签不重叠的菜单图标。