Menu icon Foundation
Media Query Ranges doesn't take effect

I'm using foundation#5.0.2 with sass/compass. I can change variables in _settings.scss like colours and so on, but seems I can't changing Media Query Ranges. It doesn't take effect.

Media Query Ranges
$small-range: (0em, 64em);
$medium-range: (64.063em, 80em);
$large-range: (80.063em, 90em);
$xlarge-range: (90.063em, 100em);
$xxlarge-range: (100.063em);

So, with

$topbar-breakpoint: #{upper-bound($medium-range)};

I would expected the menu collaps at 1024px. But this doesn't happens, still switch at 40em, default foundation settings. Sure it will be some mine mistake, but I'm stuck for the moment. Any help will be appreciated. Thank you in advance.

Sass_settings.scssmedia query

I'm using foundation#5.0.2 with sass/compass. I can change variables in _settings.scss like colours and so on, but seems I can't changing Media Query Ranges. It doesn't take effect.

Media Query Ranges
$small-range: (0em, 64em);
$medium-range: (64.063em, 80em);
$large-range: (80.063em, 90em);
$xlarge-range: (90.063em, 100em);
$xxlarge-range: (100.063em);

So, with

$topbar-breakpoint: #{upper-bound($medium-range)};

I would expected the menu collaps at 1024px. But this doesn't happens, still switch at 40em, default foundation settings. Sure it will be some mine mistake, but I'm stuck for the moment. Any help will be appreciated. Thank you in advance.

Uzi Ashkenazi almost 4 years ago

Last comment on this thread solved my issue. Hope this helps someone. http://foundation.zurb.com/forum/posts/1483-customize-topbar-breakpoint-in-scss

Uzi Ashkenazi almost 4 years ago

Still an issue for me with Foundation 5.5.3. It seems that the need to be "fancy" with media queries calculation is coming back to hunt us all. Why can't it just be straight value or a variable string? Yes, I love em-calc and rem-calc works even better but top bar media query issue has been around since Foundation 4 and is one of the most noticeable feature on RWD.

P.S. I tried every possible solution suggested in the many top bar threads, none resolve the issue. I honestly think that a better way to approach this would be to provide an always mobile setting and let everyone use visibility classes to hide/show the top bar.

The strange part is that if I comment the $topbar-breakpoint and $topbar-media-query I get the uncollapsed version of the top bar but as soon as I make any adjustments to these variables or to the Media Query Ranges, the menu items (top-bar-section) disappear and the only visible items are the .top-bar and .title-area...

Anyone came across a similar issue?

Seth Hall over 5 years ago

I am experiencing weird behavior with media queries as well.

Here is my import order.

@import "_settings.scss"
@import "foundation"
* which automatically @import "_global"

my custom _settings.scss is first because foundation relies on it.

foundation is next, which automatically imports _global.scss

My problem is this:

My custom media queries, which includes a media-query AND legacy code rewrite to adapt to my current project, are in _settings.scss, but the legacy code is first called in _global.scss, which means there are conflicts.

The legacy code appears in foundation/settings, which I copied and pasted into my _settings.scss to use the $variables in my custom rewrite, so in theory it should not be overridden in _global.scss, since it appears in foundation/_settings.scss.

Commenting out legacy code in _global.scss is a quick hack to fix, but will we broken/reversed upon Foundation update, so not ideal.

Anyway, I ramble :) Posting in hopes of helping the community.

Patrick Whitty-Clarke over 5 years ago

If you still have to do this why hasn't the documentation been updated?

dave vanderkloot almost 6 years ago

AND you have to uncomment this line:
@import "foundation/functions";

Clement almost 6 years ago

If you're having the same issue i was, the answer is simple but not evident: it's not enough to change the media query ranges, you ALSO need to leave the following uncommented underneath (even if you don't alter the default!)...

$screen: "only screen";

$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

dave vanderkloot almost 6 years ago

having the same problem; using the gem, and 5.0.2. can't customize the breakpoints/media queries. everything uses the small by default.

Paolo Visnoviz almost 6 years ago

I resolved (not in brillant way) putting "!default" in _global.scss.

// Media Query Ranges
$small-range: (0em, 40em) !default;
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em) !default;

Rafael, changin @import sequence priority doesn't work for me.

Rafael Hegre Cabeza almost 6 years ago

I think I might have found a solution. In you app.scss file, change the order of the imports to:

@import "foundation/settings";
@import "foundation";

Make also sure that all paths are correct.

You can now choose the ranges as wanted.

David Ackerman almost 6 years ago

Yep, these variables are broken and currently don't seem to do anything. :\