Menu icon Foundation
Setting breakpoint for topbar toggle

I need to increase the breakpoint width for toggling my topbar to show just the menu icon. I see 2 options in settings which seem related:

// $topbar-breakpoint: #{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";

If I simply uncomment those 2 lines I receive the following error:

Syntax error: Undefined variable: "$medium-range".
    on line 983 of C:/xampp/htdocs/hcos/sass/_settings.scss
	from line 2 of C:/xampp/htdocs/hcos/sass/app.scss

It seems for me to set my desired breakpoint I need to set

 $topbar-breakpoint: any number px;
 $topbar-media-query: "only screen and (min-width: desired value px)";

i.e. I need to set a px value for "breakpoint" but it doesn't matter if it's 1px, or 9999px. Then I set my desired breakpoint in "media-query"

Is this working properly? What are these 2 values supposed to mean?

Finally, if anyone from Zurb is reading this. The page at http://foundation.zurb.com/docs/components/topbar.html doesn't describe how to toggle the menu. I had to figure it out using firebug.

Thanks

topbartogglebreakpointsetting

I need to increase the breakpoint width for toggling my topbar to show just the menu icon. I see 2 options in settings which seem related:

// $topbar-breakpoint: #{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";

If I simply uncomment those 2 lines I receive the following error:

Syntax error: Undefined variable: "$medium-range".
    on line 983 of C:/xampp/htdocs/hcos/sass/_settings.scss
	from line 2 of C:/xampp/htdocs/hcos/sass/app.scss

It seems for me to set my desired breakpoint I need to set

 $topbar-breakpoint: any number px;
 $topbar-media-query: "only screen and (min-width: desired value px)";

i.e. I need to set a px value for "breakpoint" but it doesn't matter if it's 1px, or 9999px. Then I set my desired breakpoint in "media-query"

Is this working properly? What are these 2 values supposed to mean?

Finally, if anyone from Zurb is reading this. The page at http://foundation.zurb.com/docs/components/topbar.html doesn't describe how to toggle the menu. I had to figure it out using firebug.

Thanks


Ghaida Zahran gave the most helpful answer for this post
Ghaida Zahran over 5 years ago

To use any of the variables in your settings file, you'll need to import the file that defines those variables first. In that case, you'll want to import the globals scss file into either the top of your settings file or in your app.scss before the settings import. Don't worry about compiling redundant css, because it will only import any particular file once.

Andrew Jones over 5 years ago

I'm having issues with this feature as well. I am trying to have the "always mobile" effect and when I insert the 9999px, it does not change the breakpoint. Anyone else having this issue or have a fix?

// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;
// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: 9999px; // Change to 9999px for always mobile layout
// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";

Scott Anderson over 5 years ago

Neil,

You should be able to set your top-bar breakpoint like this:

$topbar-breakpoint: (768px) !default; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";

Bryan Leaman over 5 years ago

I've tried changing the top-bar breakpoint using the "Customize Foundation" process, but it doesn't seem to have any effect. I see two differences in the CSS where a width designation changed and no javascript differences at all. Surely something else has to be different, doesn't it? The customized version appears to be breaking at exactly the same place as the original. I want it to break around 70em instead of 62.5em.

Ghaida Zahran over 5 years ago

To use any of the variables in your settings file, you'll need to import the file that defines those variables first. In that case, you'll want to import the globals scss file into either the top of your settings file or in your app.scss before the settings import. Don't worry about compiling redundant css, because it will only import any particular file once.

Rafi Benkual over 5 years ago

Hi Ben,
You bring up a good question. In the _settings.scss file there is place to change this. Use the following code:

$topbar-breakpoint: 9999px; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;

You can change 9999px to any px value or even ems.

Here is a screenshot to help:
https://www.evernote.com/shard/s304/sh/de09163c-594d-443a-bef8-a28990b15d00/02c228354100e5cc5b29c32ea06f2134

We will change the settings file to default this scss.

Joop Vos over 5 years ago

If I import global.scss into app.scss I can tweak the top-bar-breakpoint and -media-query ... but other adjustments in the settings.scss (e.g. $body-bg) doesn't work anymore ... !?

[edit]
... weird, it's only $body-bg (settings.scss) that doesn't work anymore ... !?

Pete Shaw over 5 years ago

$medium-range is a variable in _settings.scss (around line 71). This variable is used by $topbar-media-query.

In your case, I think you need to uncomment $topbar-breakpoint, $topbar-media-query AND $medium-range in _settings.scss in order to customise the topbar breakpoint behaviour.

Joop Vos over 5 years ago

I uncomment _settings.scss:

$medium-range: (40.063em, 64em);
$topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";

... but not

// $topbar-breakpoint: #{upper-bound($large-range)}; // Change to 9999px for always mobile layout

... and it works > http://www.misterdutch.nl/new

... more or less, because now the toggle nav is centered with no width=100% or something like that ... see picture > http://goo.gl/LRvhKD

I will look into it with chrome webdev. If anybody wants to join me ... would be great ... :)

Nasser Ansari over 4 years ago

Hey guys
Did anybody solve this yet?
I'd be very thankful if you could show me how to fix this problem in css mode.
I don't know much about SASS and SCSS.

Thanks

Nasser Ansari over 4 years ago

Well after searching a lot and getting no outcome I found a real easy way to do this is CSS accidently.

I've just change this in foundation.css:
@media only screen and (min-width: 40.063em)
around line 2035

to this :

@media only screen and (min-width: 64.0619em)

and it works just fine.
But I have to mention I needed the mobile menu to be triggered only on a little larger width.
I guess it wouldn't be that hard to tweak this for other puposes.

Have fun all

Joop Vos over 4 years ago

I did it my way (Sinatra) > http://www.fokor.nl.greenhost.nl (under construction)

settings.scss (F5) >

uncomment the following under d. 'Media Query Ranges':
$large-range: (64.063em, 90em);
$screen: "only screen";
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";

new in 34. Top Bar :
// $topbar-media-query: $medium-up;
$topbar-media-query: $large-up;

Steffin Pereira about 3 years ago

Hi, First of all I would like to thank zurb for such an amazing product.

I tried this break point in 5.5.2 and was pretty easily accomplished just by changing the width in 3 instances as follow:

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:64.063em/";
  width: 64.063em;
}


@media only screen and (min-width: 64.063em) {
  .top-bar {
    background: #333333;
    *zoom: 1;
    overflow: visible;
  }

the only problem I'm facing is the main menu of the drop down is not visible (once you click it) when it comes to toggle menu, unless you reach the actual break point ie. 40.063 em. Should I need to make any change in javascript?

Thanks for helping me!!

Steffin Pereira about 3 years ago

Hi,

I've done a little more research and found the fix. All you have to do is go to [js/foundation/foundation.topbar.js]
line number 368 change "show-for-small" to "show-for-medium-down".

Following is the code for you:


if (settings.mobile_show_parent_link == true && url) {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5></li><li class="parent-link show-for-medium-down"><a class="parent-link js-generated" href="' + url + '">' + $link.html() +'</a></li>');
          } else {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5>');
          }


Then at the very bottom of your html file, where you are calling other js files, call topbar.js by adding
<script src="js/foundation/foundation.topbar.js"></script>


You can even make this work just by making the above change in js/foundation.min.js