Menu icon Foundation
Off-canvas for mobile only

The original off-canvas only hid the sidebar for small screens. Is there a quick way to get this functionality back? Is this something you might consider pulling to the main branch?

off canvasoffcanvasmobile

The original off-canvas only hid the sidebar for small screens. Is there a quick way to get this functionality back? Is this something you might consider pulling to the main branch?

Michael Schoonmaker almost 6 years ago

Bump.

This is a big issue for responsive applications. It's entirely possible I'm missing something obvious to previous Foundation users, but there's no documentation to this effect and the only other resource I found was for 3.2.

Any solutions?

Nando Boronat almost 6 years ago

Waiting for the same thing.
Off canvas on mobile was one of the most valuable features of my Foundation 3 framework for Magento: http://www.magentocommerce.com/magento-connect/magento-foundation-4741.html

Thank you.

Robin Cox almost 6 years ago

Use jquery to add the class "move-right" to screens wider than for instance 640px. The move-right class makes the off canvas menu show on screen, without it, it will be positioned out of sight (which yo want for smaller screens).

You can check the width of the visitors browsers viewport (the area where the website will show) with window.innerWidth. The following checks if the viewports width is larger than 640px, if so, it adds the class of move-right.

if(window.innerWidth < 640) {
$(".off-canvas-wrap").addClass("move-right");
}

Dennis Aleynikov over 5 years ago

Might not be entirely related, but I've had the same issue come up when I installed foundation on rails using the method listed in Foundation's documentation:

 rails g foundation:install

I later found that the installation somehow added foundation's js twice, causing the off-canvas to not respond.

$(document).foundation();
$(function(){ $(document).foundation(); });

Removing the second line fixed everything for me.