Menu icon Foundation
Off-canvas and menu icon breaking on upgrade

Hello friends,
Since I started designing my personal website recently I've always wanted it to feature a sliding navigation pane on top of the navbar. I tried implementing this using top-off-canvas-menu but each time it has failed to work, and the result is similar to that which you see here - only with the little "hamburger" menu icon still visible.

right-off-canvas-menu works just fine in the version of Foundation that I had last, which must have been an early build of 5 (I was trying to go from 5.5.1 to 5.5.3). I thought that upgrading Foundation would help solve my problem- but instead it's made everything worse.
What you see here is actually the result of upgrading, the off canvas element disappears and just becomes an unstyled div sitting at the top of the page.

Brokenbanner1

Ultimately I've had to resort to an earlier version of foundation to get things working again, I've read the migration guide but it doesn't mention anything about changes made recently to offcanvas and top bar stuff.

Even then this is the best I can do, the offcanvas nav appearing on the side instead of the top where I'd rather see it:

Therealityworking

could someone shed a light on why this isn't working?

Things you need to know:
I'm NOT using ruby / compass / SASS, everything in my site is just javascript

There shouldn't be anything wrong with my code since it worked perfectly before upgrading.... It looks like it does in everyone else's tutorials on how to do an Offcanvas with top bar.

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <nav class="tab-bar">
        <img id="homeLogo" src="images/logos/Kezz_Logo.svg" alt="Home Button Logo"/>
        <h1>Kezz.NYC</h1>
        <section class="right-small">
          <a class="right-off-canvas-toggle menu-icon"><span></span></a>
        </section>
      </nav>
      <aside class="right-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><a href="#">Coming Soon</a></li>
        </ul>
      </aside>
 
<!--Begin Main Site -->
   .         
   .
   .
   <a class="exit-off-canvas"></a>
   </div>
  </div><!-- end offcanvas -->
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>
</body>

Any help would be greatly appreciated, perhaps I am not doing the upgrade properly...
Mainly I'd downloaded the files from the Foundation website and used them to replace the ones I was referencing on my site.

Either that or it's something else, thanks for looking into this.
Lastly, here's a look at the type of navigation I'd like to achieve in my final product - this is the initial mockup I made with Jquery animations, which would be way to inefficient to use on my mobile site. The spinning menu icon is superfluous.

The dream

offcanvasoff-canvastoptabtab-barnavigationupgrade5menumenu-iconnot renderingno displayBroken

Hello friends,
Since I started designing my personal website recently I've always wanted it to feature a sliding navigation pane on top of the navbar. I tried implementing this using top-off-canvas-menu but each time it has failed to work, and the result is similar to that which you see here - only with the little "hamburger" menu icon still visible.

right-off-canvas-menu works just fine in the version of Foundation that I had last, which must have been an early build of 5 (I was trying to go from 5.5.1 to 5.5.3). I thought that upgrading Foundation would help solve my problem- but instead it's made everything worse.
What you see here is actually the result of upgrading, the off canvas element disappears and just becomes an unstyled div sitting at the top of the page.

Brokenbanner1

Ultimately I've had to resort to an earlier version of foundation to get things working again, I've read the migration guide but it doesn't mention anything about changes made recently to offcanvas and top bar stuff.

Even then this is the best I can do, the offcanvas nav appearing on the side instead of the top where I'd rather see it:

Therealityworking

could someone shed a light on why this isn't working?

Things you need to know:
I'm NOT using ruby / compass / SASS, everything in my site is just javascript

There shouldn't be anything wrong with my code since it worked perfectly before upgrading.... It looks like it does in everyone else's tutorials on how to do an Offcanvas with top bar.

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <nav class="tab-bar">
        <img id="homeLogo" src="images/logos/Kezz_Logo.svg" alt="Home Button Logo"/>
        <h1>Kezz.NYC</h1>
        <section class="right-small">
          <a class="right-off-canvas-toggle menu-icon"><span></span></a>
        </section>
      </nav>
      <aside class="right-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><a href="#">Coming Soon</a></li>
        </ul>
      </aside>
 
<!--Begin Main Site -->
   .         
   .
   .
   <a class="exit-off-canvas"></a>
   </div>
  </div><!-- end offcanvas -->
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>
</body>

Any help would be greatly appreciated, perhaps I am not doing the upgrade properly...
Mainly I'd downloaded the files from the Foundation website and used them to replace the ones I was referencing on my site.

Either that or it's something else, thanks for looking into this.
Lastly, here's a look at the type of navigation I'd like to achieve in my final product - this is the initial mockup I made with Jquery animations, which would be way to inefficient to use on my mobile site. The spinning menu icon is superfluous.

The dream
Rafi Benkual almost 4 years ago

Looking at your code, you have a right off-canvas menu.

Tough to tell why it's not working for you - extracting your code into a fresh page shows it works http://codepen.io/rafibomb/pen/rOowmO?editors=110

I changed the right to top.