Off canvas menu (left and right) disappearing every other hamburger menu click

[Pixelsmith]

How can this bug be reproduced?

1. Download and install WP v4.7.3
2. Download and install FoundationPress v2.9.2
3. Set up a WP menu
4. Assign menu to both "Display locations": Right Top Bar and Mobile
5. Change menu from Topbar to Offcanvas under Customize -> Mobile Menu Settings -> Mobile navigation layout
6. View site in responsive mode (Phone, Chrome or Firefox) and click the hamburger menu once to open, then close the menu, then open it again

What did you expect to happen?
I expect to see the menu on the second click of the hamburger menu, but it's disappearing every second click

What happened instead?
The menu disappears on the second menu opening

For some reason when I click the hamburger menu, some script is updating nav.off-canvas from style="display: block;" to style="display: none;", but only on the first click, not the close click.

Please List the Following:

• OS & version: Windows 10
• Node version (node -v) [Node v4+ is required] : 4.1.1
• Foundation version (bower list) : 6.3.0

Include Test Case (if applicable):
Give us a link to a CodePen or JSFiddle that recreates the issue.

• CodePen with Foundation 6 and MotionUI
• CodePen with Foundation 6, Flexbox grid and MotionUI

[richardmscott]

I have experienced the same issue but on OSX Yosemite.

I inserted the following to foundation.js as a temporary fix at line 539:

key: 'open', value: function open(event, trigger) { // Fix for off canvas display none problem this.$element.show();
This ensures that the style="display: none;" is removed.

[Pixelsmith]

Hi Richard,

Thanks for confirming the error.

I tried your fix, but it didn't work for me.

At and around line 539 in FoundationPress > Assets > javascript > foundation.js I see:

case 'center left': return { left: $anchorDims.offset.left - ($eleDims.width + hOffset), top: $anchorDims.offset.top + $anchorDims.height / 2 - $eleDims.height / 2 };

Is that the file you're referring to? When I pasted your code the malfunction continued.

Plus, updating that file is a very short term fix since it's overwritten every time there's an update to any custom JS that might be written.

[EricRihlmann]

Fixed, this had to do with a conflict with the Responsive Navigation's Responsive Toggle feature. Solution is to have a unique ID for both the top bar and off-canvas menus.

[Pixelsmith]

Confirmed the fix on my side.

Thanks @EricRihlmann ! I really appreciate your help.