Menu icon Foundation
Can I set different widths for Off Canvas Width at different breakpoints

I'm struggling with setting the $off-canvas-width at various breakpoints. I would like to set a fix pixel (or rem) based width for the off canvas menu for large, medium and small screens.

Because the width is set via the $off-canvas-width variable I don't if it's possible to modify it with media queries. Am I wrong?

off-canvasmedia queries

I'm struggling with setting the $off-canvas-width at various breakpoints. I would like to set a fix pixel (or rem) based width for the off canvas menu for large, medium and small screens.

Because the width is set via the $off-canvas-width variable I don't if it's possible to modify it with media queries. Am I wrong?

Rafi Benkual almost 5 years ago

You can do this with media queries.

@media #{$small-only} {
   $off-canvas-width: rem-calc(150);
}

@media #($medium-up) {
  $off-canvas-width: rem-calc(250);
}
use one of these options:```
$small-up 
$small-only

$medium-up
$medium-only

$large-up
$large-only

$xlarge-up
$xlarge-only

$xxlarge-up
$xxlarge-only

derekshirk almost 5 years ago

When I place this in _settings.scss I get a grunt error: unbound variable $small-only

I have tried using media queries within the settings_scss file like so

$off-canvas-width: 85%;

@media only screen and (max-width: 40em) {
   $off-canvas-width: rem-calc(320);
}

@media only screen and (min-width: 40.063em) {
  $off-canvas-width: rem-calc(400);
}

The only variable that is used is whatever is set last