Menu icon Foundation
Off canvas left on medium, right on small

I have a side menu based on off-canvas component. Permanently visible on medium breakpoint, hidden on small. 

 

Is there a way to make off-canvas menu appear from the right on small and stay on the left on medium?

off-canvas

I have a side menu based on off-canvas component. Permanently visible on medium breakpoint, hidden on small. 

 

Is there a way to make off-canvas menu appear from the right on small and stay on the left on medium?

Walking In The Darkness 11 days ago

@Sven, sure you can, you just need to set up off-canvas/in-canvas-for-medium container.

look at the code-pen example here:

Foundation Off/In-Canvas

Sven 11 days ago

Hmm…

Using .in-canvas-for-large instead of .reveal-for-medium screws up my layout completely…

 

Edit – had to rework my grid to make it work, thanks! 

I'm surprised, though, that you need to float layout pieces like that and framework does not contain tools to achieve layout you want without floating.

And settings do not work anymore if i use in-canvas-for-medium. Maybe they should'nt work, because it's not "off-canvas" anymore if using .in-canvas-for-medium. Don't know if it's a bug or feature…

Walking In The Darkness 11 days ago

Foundation does contain tools to achieve layout without (explicit) floating.
I have used floats as

  • first - I don't know what grid system do you use,
  • second - I use old "float" based system and don't know "XY" system at all,
  • and lastly - I use Sass version so I was able to do sth like this:
#dashboard-off-canvas {
 	
   @include breakpoint(medium) {
      @include grid-column;
      @include grid-column-size(4);
   }
   // (...)
}
#dashboard .off-canvas-content {
   @include grid-column;

   @include breakpoint(medium) {
      @include grid-column-size(8);
   }
   (...)
}

so, as you can see I aplied grid starting from breakpoint where I want sidebar to be "in-canvas". If I remember (!) it did not work when I just applied classes to elements (instead using mixins) (but I may be wrong as well).
Side note - I am actually more happy having this with the use of mixins as the code is more semantic.

cam cameron46 10 days ago

newyear2018wallpapers

newyearhdimages

newyear hd wallpapers

As a new year unfolds, the IFAC'2017 organization team wishes you wonderful and joyous times ahead! Have great success in your research, and save your ...