Menu icon Foundation
How do I left-align the hamburger menu in Foundation?

I'm using SASS, which I'm brand new to, but I'm running into problems. From the documentation, it sounded like I needed to edit _top-bar.scss and add a line that says: $topbar-menu-icon-position: $default-float; (as opposed to $opposite-direction;).

But that doesn't seem to work -- the hamburger menu icon continues to be right aligned on mobile.

I'm pretty sure the issue isn't with the HTML code, but just in case:

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

hamburgermenuleft-alignsites

I'm using SASS, which I'm brand new to, but I'm running into problems. From the documentation, it sounded like I needed to edit _top-bar.scss and add a line that says: $topbar-menu-icon-position: $default-float; (as opposed to $opposite-direction;).

But that doesn't seem to work -- the hamburger menu icon continues to be right aligned on mobile.

I'm pretty sure the issue isn't with the HTML code, but just in case:

<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>
Rafi Benkual over 4 years ago

Looks like someone reverted the code from when this was added. Here is the original commit https://github.com/zurb/foundation/commit/bcf97376a8de1a14b4c0886f1b5f3eff85ca0858

For now you can make those changes to make this work. We'll go back and add it in for the next update.