title: Zurb Foundation 4, Off Canvas and Shopify
body: <p>Hi I am trying to get zurb foundation 4 to have the off canvas mobile menu work within my shopify store. the issue I am having is that it is displaying the menu button fine, but it isn't triggering anything when clicked and the preloaded sidebar is visable on desktop</p>
  
  <p>the code i have used so far is</p>
  
  <pre><code>&lt;!-- mobile only side bar --&gt;
      &lt;header class="row"&gt;
          &lt;div class="large-8 columns small-2"&gt;
              &lt;p class="show-for-small"&gt;
                &lt;a class='sidebar-button button' id="sidebarButton" href="#sidebar" &gt;Menu&lt;/a&gt;
              &lt;/p&gt;
        &lt;/div&gt;
          &lt;section id="sidebar" role="complementary"&gt;
              &lt;nav id="sideMenu" role="navigation"&gt;
                  &lt;ul id="sideMainNav" class="nav-bar"&gt;
                      &lt;li&gt;&lt;a href=""&gt;test&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Two&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Three&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Four&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/section&gt;
          &lt;/header&gt;
      &lt;!-- /mobile --&gt;
  
  
  &lt;!-- Check for Zepto support, load jQuery if necessary --&gt;
  &lt;script&gt;
    document.write('&lt;script src=/'
      + ('__proto__' in {} ? 'zepto' : 'jquery')
      + '.js&gt;&lt;\/script&gt;');
  &lt;/script&gt;   
  
  {{ 'zepto.js' | asset_url | script_tag }}
  {{ 'foundation.min.js' | asset_url | script_tag }}
  &lt;script&gt;
    $(document).foundation();
  &lt;/script&gt;
  {{ 'jquery.offcanvas.js' | asset_url | script_tag }}
  </code></pre>