Menu icon Foundation
Foundation 6 - Off-Canvas reveal-for-large

Hi,

Been using foundation for a while now and love it!
I am just updating a project to F6 and have come across a small issue.
This project uses an off-canvas menu for small screen navigation, this works fine in F6. However, on large screens I have a secondary menu which mimics the off-canvas menu but is always visible down the left of the screen. Upon downloading starting to use F6, i notice there is a fantastic class named "reveal-for-large" as part of the off-canvas element. Obviously, this class made me very excited as I would no longer need to duplicate the menu. However, in the small amount of testing I have done with this class, it appears the links within the menu are not clickable - they are obstructed by the .off-canvas-wrapper-inner element .

The same problem exists on the Foundation Docs site for Off-Canvas - http://foundation.zurb.com/sites/docs/off-canvas.html , for the off-canvas menu featured there.

Not a major issue, I can work around it, but I feel it is worth mentioning to the Foundation Gods that something may need to be done.

Thanks Foundation for all the other wonderful work they have done for this new version!

foudnation6off-canvasreveal-for-large

Hi,

Been using foundation for a while now and love it!
I am just updating a project to F6 and have come across a small issue.
This project uses an off-canvas menu for small screen navigation, this works fine in F6. However, on large screens I have a secondary menu which mimics the off-canvas menu but is always visible down the left of the screen. Upon downloading starting to use F6, i notice there is a fantastic class named "reveal-for-large" as part of the off-canvas element. Obviously, this class made me very excited as I would no longer need to duplicate the menu. However, in the small amount of testing I have done with this class, it appears the links within the menu are not clickable - they are obstructed by the .off-canvas-wrapper-inner element .

The same problem exists on the Foundation Docs site for Off-Canvas - http://foundation.zurb.com/sites/docs/off-canvas.html , for the off-canvas menu featured there.

Not a major issue, I can work around it, but I feel it is worth mentioning to the Foundation Gods that something may need to be done.

Thanks Foundation for all the other wonderful work they have done for this new version!

Jacob Wolf almost 4 years ago

Hey Paul,

I had the same problem today. Anis got the solution for me:

http://foundation.zurb.com/forum/posts/36270-off-canvas-reveal-on-larger-screens--links-do-not-work

Jacob

Paul Terry almost 4 years ago

Thanks Jacob,
That's exactly what I ended up doing.
There should be a more elegant solution than using z-index though; On smaller screens the menu is usable without altering the z-index.

The closest I have got so far is:

@media only screen and (min-width: 64em) {
    .off-canvas-wrapper-inner
    {

       transform: translateX(5.2rem);
    }
    .off-canvas.position-left
    {
        left:-5.2rem;
    }
}

But that ends up crashing the browser on screen resize due to the transform property.
NOTE: I have altered the width of the off-canvas menu to 5.2rem, the default is 250px i believe.

Geoff Kimball almost 4 years ago

We fixed this issue in Foundation 6.0.4, which was released last week. Try upgrading your project and see if it works.