如何左对齐 Foundation 中的汉堡菜单答案

【问题标题】：How do I left-align the hamburger menu in Foundation如何左对齐 Foundation 中的汉堡菜单
【发布时间】：2015-06-24 02:12:27
【问题描述】：

我正在使用 SASS，我是全新的，但我遇到了问题。从文档中，听起来我需要编辑 _top-bar.scss 并添加一行： $topbar-menu-icon-position: $default-float; （与 $opposite-direction 相对；）。

但这似乎不起作用——汉堡菜单图标在移动设备上仍然是右对齐的。

我很确定问题不在于 HTML 代码，但以防万一：

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Name</a></h1>
    </li>
    <li class="toggle-topbar menu-icon">
      <a href="#"><span>menu</span></a>
    </li>
  </ul>
  <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </section>
</nav>

【问题讨论】：

标签： html css menu sass zurb-foundation

【解决方案1】：

如果你看here

你会看到一个顶栏位置

   $topbar-menu-icon-position: $opposite-direction !default; // Change to $default-float for a left menu icon

基本上你需要把它改成

  $topbar-menu-icon-position: $default-float !default;

我建议将其添加到您的本地 sass 中，而不是编辑原始文件，以便您将来可以轻松升级。

【讨论】：