Menu icon Foundation
sticky off canvas menu in f6 like f5

hi guys i am working on foundation 6 offcanvas but actually i got in pinch situation i want off canvas work like foundation 5 sticky off canvas

here is foundation 5 sticky canvas example : http://codepen.io/rafibomb/pen/hApKk

i want same off canvas menu in foundation 6 thanks

any help would be appreciated

off canvasfoundation 6sticky off canvas

hi guys i am working on foundation 6 offcanvas but actually i got in pinch situation i want off canvas work like foundation 5 sticky off canvas

here is foundation 5 sticky canvas example : http://codepen.io/rafibomb/pen/hApKk

i want same off canvas menu in foundation 6 thanks

any help would be appreciated

Rafi Benkual over 3 years ago

In the F5 example you linked, we used absolute position to pin the menu to the top and made the body scrollable. This works ok, unless you need other components that scroll withing the body. It makes positioning tooltips and dropdowns tricky because of the scrolling container.

We recently wrote a lesson on using the sticky plugin in F6. It works well with the off-canvas title-bar as well.

http://codepen.io/rafibomb/pen/MyVWgE?editors=1100

 

You could also use position fixed on the title-bar but it doesn't perform as well.

http://codepen.io/rafibomb/pen/XXZMxG?editors=1000

hassan over 3 years ago

Thanks @Rafi Benkual which links you sent me i got that and i have same thing what you mentioned in these links but there problem is when you click on sticky nav button to open off canvas then top bar goes on top mean topbar hide from that point and goes on top of page where off canvas starts .

but If you see in foundation 5 no matter where is top bar or content even its scroll down and we click on button off canvas will appear from that point thats what we need and that was awesome off canvas.

In f6 off canvas start from top ok if i am using sticky nav and user scroll page down and he want to open off canvas he clicked then user see off canvas open but for links he have to scroll all page to top .

But in F5 no matter where is page and user scrolling when user click on button he just got off canvas there thats what i want.

in F5 you can see it's awesome tell me any solution for F6. Thanks

hassan over 3 years ago

I am going to attach some screenshots hope it will help to understand what actually i want thanks.

foundation 5 off canvas

foundation 5 off canvas

foundation 6 off canvas

foundation 6 off canvas

Blerim Haliti over 3 years ago

Hi guys.

I am having the same issue as Hassan on this.
@Hassan - Great explanation.

I hope someone has a solution available

Thanks

jinch over 3 years ago

Same here... this is actually a key feature of my layout as well. May need to switch back to F5 or give the Boot a try if there is not a solution.

hassan over 3 years ago

Hey blerim and @jinch I found a solution for this.

http://codepen.io/zurbrandon/pen/adbOPN

this link will help you.

Thanks

Kevin Neal over 3 years ago

I've never managed to get the off canvas parts to stay fixed for some reason, yet if I use reveal-for-large then the off canvas parts are fixed

jinch over 3 years ago

Thanks Hassan,

But, can you use it with a sticky top-bar?

Everything I have tried so far has not worked.

hassan over 3 years ago

@jinch Yes I did it with sticky topbar and its worrking fine :)

jinch over 3 years ago

Hmmmm... this may be in need of my own post as I am kind of hijacking this one but could you take a look at this.

I have implemented the code above however with my situation I have 2 fixed top bars. On small screens I found a problem if you scroll to the bottom it will (sometimes) throw off the positioning of my fixed nav.

I think it has something to do with the overflow-y:auto // it somehow is not calculating the height of the other fixed bar?

 

 

hassan over 3 years ago

@jinch i saw your code you are still using foundation 6 code which codepen link i sent just try that instead of that link and css you will see effect just remove your html of offcanvas and add codepen html and css then try it and let me know thanks i will help you out :)

jinch over 3 years ago

I'll try hassan but this gets away from using off-canvas effect of sliding everything over witch is a neat effect. Ideally I would like to get this to work the way it did in F5 // I'm surprised this feature was removed and we are forced to work around. Its a bit of a let down but I will see if I can get it to work or move back to F5 or Boot.

hassan over 3 years ago

okay @jinch yes thats true but only this is best solution i got so i shared with you its remove actual effect but its doing same and one more thing i want to tell you this feature is available with foundation 6 offcanvas reveal try that and you will see thats working thanks :)

jinch over 3 years ago

Do you know if the latest release of Foundation 6.2.3 has addressed this issue to avoid the use of this hack?

If so, how would you implement?

 

 

Snig over 3 years ago

I have just implemented a new site using Foundation 6.2.3's off canvas menu (which also includes Joran Van Hee's wonderful Sass mixin for creating animated burger icons - thanks so much Joran!).  

While not a sticky menu in the sense you have described above it might give you some other ideas for how to approach this..refer Majura Football Club.

Cheers, Snig

Brett Mason over 3 years ago

I've added a PR https://github.com/zurb/foundation-sites/pull/8872 which should address this issue, go take a look!
Hopefully it should be in the next point release if all works correctly.

Dmitrii Karpovich about 3 years ago

Hi all!

I'm curious to know what is going on with this issue? It's seems to me that a few months already passed. No decision still? Because i'm definitely the one who can only wait.

So I've checked the codepen here http://codepen.io/brettsmason/pen/WxeeNO It works very well for desktop and works well for mobile in a half view mode (there is button in codepen mobile beneath - 1x, 0.5x, 0.25x). 

Will be kindly appreciated for answer.

Ryan McCready almost 3 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63

Erik Krause over 2 years ago

So the codepen here http://codepen.io/brettsmason/pen/WxeeNO  used to work with F6.2 but with F6.3 the title bar scrolls away if the content is scrolled down a bit and the open button is clicked. data-content-scroll=false doesn't help, neither did anything else I tried. Could someone please update the codepen accordingly?