Off-canvas nav shows two menus

I am working on a "top bar with off-canvas navigation" using the example from Foundation building block section.

Here is my code,

$(document).foundation();

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

    <!-- off-canvas title bar for 'small' screen -->
    <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
      <div class="title-bar-left">
        <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
        <span class="title-bar-title">Menu</span>
      </div>

    </div>

    <!-- off-canvas left menu -->
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <ul class="menu vertical">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>

    <!-- "wider" top-bar menu for 'medium' and up -->
    <div id="widemenu" class="top-bar">
      <div class="top-bar-left">
        Icon
      </div>
    </div>

    <!-- original content goes in this container -->
    <div class="off-canvas-content" data-off-canvas-content>
      <div class="row column">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>

    <!-- close wrapper, no more content after this -->
  </div>
</div>

(p.s. The code editor in stackoverflow does not even work for the toggle part, but you can see it on jsfiddle: https://jsfiddle.net/03bx493q/)

and you can see something weird,

When I click on the button (first time), it shows both desktop version menu and off-canvas menu. Then I close the menu by clicking the button again.
When I click on the button (second time), it only shows the off-canvas menu.

I have tried different ways to solve such as adding "hide-for-small" class to the widemenu (and it does not help as expected)...

Thanks in advanced!

Solution

I'm not sure what the exact problem is, but your html structure isn't quite right. I have a working example, which I've modified using your content:

Fiddle Demo

HTML:

<div class="off-canvas-wrapper">
  <!-- off-canvas left menu -->
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
      <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
      <ul class="mobile-ofc vertical menu">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>

    <!-- "wider" top-bar menu for 'medium' and up -->
    <div class="off-canvas-content" data-off-canvas-content>
      <div id="widemenu" class="top-bar show-for-medium">
        <ul class="menu">
          <li class="topbar-title">
            Icon
          </li>
        </ul>
      </div>

      <!--top-bar for small-->
      <div id="offCanvasLeft" class="title-bar hide-for-medium">
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
          <span class="title-bar-title">Menu</span>
        </div>
      </div>

      <!-- original content goes in this container -->
      <div class="expanded row">
        <div class="row columns">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
      </div>
    </div>
  </div>