Menu icon Foundation
Can't get off canvas to toggle on mobile

I've got an off-canvas menu (paired with a css-only topbar) which works fine on my desktop browser at all sizes but the off-canvas toggle simply won't work on my iphone. Any idea what might be going wrong?? I'm using foundation-rails in a Rails 4 app.


I've got an off-canvas menu (paired with a css-only topbar) which works fine on my desktop browser at all sizes but the off-canvas toggle simply won't work on my iphone. Any idea what might be going wrong?? I'm using foundation-rails in a Rails 4 app.

This post has been closed. No new replies can be added.

Karl Ward over 5 years ago

It won't work or it won't display on mobile devices? Would be helpful if you had a link. I am using an off-canvas menu, and it works fine on mobile.

Clement over 5 years ago

OK. Here's the link to what I've got so far:

Lisa Rueh over 5 years ago

I am experiencing the same problem as Clement.
Basically I enhanced the example (index.html from the get started download) provided by Foundation with the code for the off-canvas navigiation after realizing that it did not work. (
The navigation works fine on desktop browsers but it does not function on iPad or iPhone.

Here is some code from my actual implementation:
<!DOCTYPE html>

To Do List in responsive Webdesign - Login

  <link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/personal_css.css" />

  <script src="js/modernizr.js"></script>
<div class="off-canvas-wrap docs-wrap">
<div class="inner-wrap">
  <div class="fixed">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" >
      <section class="middle tab-bar-section">
          <h1 class="title">Care Connect</h1>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><a href="">Help?</a></li>
        <li><a href="">Site Notice</a></li>
    <a class="exit-off-canvas"></a>

  <section class="main-section">
  <div class="row">
  <div class="large-12 columns">
    <hr />
    <h2>Login Care Connect</h2>

            <form class="login" name="input" action="html_form_action.asp" method="get">
                Username: <input type="text" name="username" class="login_fields" placeholder="Enter Username"><br>
                Password: <input type="password" name="pwd" class="login_fields" placeholder="Enter Password">

            <div class="password">
                    <input type="submit" value="Login" class="small radius button">

<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>

And a link:

Help is much appreciated!
Thanks in advance.

Karl Ward over 5 years ago

@Clement: I am not 100%, but your application has a JS error "Uncaught TypeError: Object [object Object] has no method 'ckeditor'", and in some cases there errors can break the chain of command in the javascript processing. My only other guess would be inconsistencies in your html structure, but I would eliminate other issues first ...

@Lisa: Your off-canvas menu works fine here from my iPhone.

Clement over 5 years ago

@Karl Ward, even with that javascript disabled, I'm not having any luck. Strange thing is it works fine when I select mobile devices with Chrome's 'emulate' developer tool. Could it be a Rails-specific fault? Oters are having this issue, it seems:

Karl Ward over 5 years ago

@Clement: Doubtful it is Rails, as that is not interpreted by iPhone in any way, only the JS + html structure. Unless there is something wrong or some mixup with your foundation installation, there is essentially only two reasons why it might fail: 1) Bugs in JS / conflicts, or 2) Mistakes in the html structure. I can't immediately see anything wrong with the structure.

Although a bit tedious, I would do an elimination approach. Remove ALL non-required CSS and JS files, and see if it works. If its down to skin-and-bones foundation structure, it its still not working, well then that is interesting ...

Clement over 5 years ago

@Karl Ward

I followed your advice and tried disabling all non-essential js and all non-essential css. Didn't work. I also tried replacing my html with the one from the advanced section of the off-canvas docs. Didn't work either. Any other ideas?

Clement over 5 years ago

@Lisa, I'm not seeing your off-canvas menu on my phone OR on my desktop, just your top-bar menu. @Karl – are you sure Lisa's off-canvas menu works ok?

Karl Ward over 5 years ago

Hard to say why you can't get it to work. I could diagnose it if you removed all JS and used the default foundation html ... The off-canvas menu works fine for me and in the documentation page ... It must be something in your code. As mentioned, if you start removing stuff to make it a naked Foundation version, it has to work ... If it doensnt, it means there is something wrong with your downloaded components, which is doubtful.

Lisa changed the website in her link. There is now only a top-bar component ... The off-canvas she had earlier was working fine ...

Clement over 5 years ago

I've ditched the foundation off-canvas and am using this one instead: so I haven't been able to troubleshoot this anymore. One thing I didn't try though was tweaking the off canvas toggle z-index. Though the toggle was visible there might have been an invisible part of some element covering it and preventing it from being activated?

Mark Serellis over 5 years ago

I had this exact problem with the latest version too. Easy to replicate by creating a very simple page using the basic offcanvas example and testing it on the iphone.

I have found a workaround, simply add a click event to the menu toggle. The event doesn't have to do anything but just being there seems to make it work. e.g.



Hope this helps in finding a solution for this?

Kevin Martinez over 5 years ago

Hi guys! I have been knocking my head into the wall about this issue, but i think i can solve it for you.

I have the off canvas working on an f5 fully updated site, being able to toggle it on the phone, but when finishing a new project it just would NOT toggle no mather what i did.

Anyhow, the magic word is the custom css nav for larger screens, me aswell did not use foundations top-bar and when i replicated and copied from my old site it was that simple that the nav container for the off canvas menu NEED to have the data-topbar attached to it ex, HTML <nav class="tab-bar show-for-small" data-topbar> if you do not use the foundation top bar combined with the off canvas show-for-small. I guess they belong together :D

I hope you understand, i wrote this in a rush but i've been working for this a few hours and it was a must to share.

Greetings from Sweden.

Joe Workman over 5 years ago

Adding data-topbar to my nav element fixed it for me. This definitely feels like a bug in f5 to me.

<nav class="tab-bar hide-for-large-up" data-topbar>

Matthias Max over 5 years ago

Kevin's hint did not work for me. Mark's did though! Thanks guys!

Andrew Layton over 5 years ago

Combining data-topbar with show-for-small finally fixed the problem for me as well. Couple of concerns: 1) this is not mentioned anywhere in the Off Canvas docs, and 2) I can't see where any of the examples in the docs use data-topbar in their source code.

Is there an official word on whether data-topbar should be required for off-canvas to work? If so, it would be really helpful (as in would have saved me about an hour of troubleshooting) if it were added to the docs.

George Calrk over 5 years ago

I had this problem, after spending hours looking for divs covering the toggle, and messing with z-indexing...
I can confirm @Mark Serellis's solution works!!!
Just add the empty function call he mentions and BOOM, ios6 starts playing ball..
Nice one Mark ;)


Rymasz over 5 years ago

I also had this problem and was going crazy to solve it. Fortunatelly found Mark Serellis solution. Works perfectly. But .... Andrew Layton inspired me to check this page HTML. I noticed that is using href="#sidebar" and tried this by my own and without Mark Serellis fix .... It works!

So please check if this could help you also.

My code which works:

          <nav class="tab-bar top-bar">
            <section class="left-small hide-for-large-up">
              <a class="left-off-canvas-toggle menu-icon" href="#off-canvas-navigation"><span></span></a>

By the way - Kevin's Martinez solution with data-topbar works until I scroll the page. I have "sticky" top-bar, so maybe this conflicts, but other ways works always.

Kevin Martinez over 5 years ago

How can we get the attention from the developers for this issue? A lot of different solutions and issues, this needs to be adressed.

Rymasz over 5 years ago

Maybe this problem come off some weird iPhone implementation and everything is OK with Foundation. The most important thing is to emphasize the need of href argument in link - for mobile Safari :)

Andrew Layton over 5 years ago

Rymasz's code worked for me (thanks for sharing, by the way!). It could very well be a funky issue with mobile Safari, but if the Zurb folks updated their own code to address it, then it would be really cool of them to mention that in the docs. As far as I can tell, none of their Off Canvas examples include the href.