Menu icon Foundation
Adjusting Break points for topbar

Hey guys,

I'm using Foundation 5 with a slight adjustment (page width = 80em, breakpoint still 58,75em). However, when I reduce the viewport, the won't adjust to the mobile version (dropdown menu button) until the viewport is less than 645px wide. It should adjust itself when viewport is less than 940px.

How do I configure that?

I haven't done any adjustments, not JS nor CSS, so It's (probably) not my fault for that behaviour.

Thanks!

topbarbreakpointsettings

Hey guys,

I'm using Foundation 5 with a slight adjustment (page width = 80em, breakpoint still 58,75em). However, when I reduce the viewport, the won't adjust to the mobile version (dropdown menu button) until the viewport is less than 645px wide. It should adjust itself when viewport is less than 940px.

How do I configure that?

I haven't done any adjustments, not JS nor CSS, so It's (probably) not my fault for that behaviour.

Thanks!


Rafi Benkual gave the most helpful answer for this post
Rafi Benkual almost 5 years ago

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.

This post has been closed. No new replies can be added.

Ghaida Zahran almost 5 years ago

Hey Sander, the top bar has its own breakpoint variable that you can set in the settings file here:

$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)})";

Replace this value #{upper-bound($medium-range)} in the $topbar-breakpoint variable to your new breakpoint value .

Paul Elphick almost 5 years ago

Just wondering can this value be changed using CSS only? I have changed the visual elements in the CSS to a wider breakpoint and this works fine but the Javascript doesn't kick in until the default setting (approx 640px).

Any help would be appreciated.

Paul

TC almost 5 years ago

I'm having the same problem. I need the break point to happen soon. Otherwise the top bar doubles up and looks uh, well uh you know awful! ; - )

Shean Hoxie almost 5 years ago

I found that changing the $topbar-media-query was what I needed to keep my topbar from resizing. You might want to change the value in that and see if it works for what you need

 $topbar-media-query: "only screen and (min-width: 1px)";

@import 
  "../bower_components/foundation/scss/foundation.scss",

Paul Elphick almost 5 years ago

From what I understand from the original post the issue you are having is the javascript - therefore for the mobile dropdown menu isn't firing until you get down to 640px - I was having the same issue - had been tinkering with the CSS and Topbar.js trying to figure out what was doing what and stumbled across a solution that works in my case - why it works I don't know but it might prove useful...

First I duplicated the meta.foundation-mq-topbar class (foundation.css) and all its properties and renamed it .topbar-breakpoint then changed the values to the breakpoint I required (in this case 60em) so that I ended up with:

.topbar-breakpoint { font-family: "/only screen and (min-width:60em)/"; width: 60em; }

Then in the foundation.topbar.js file, changed line 23

self.register_media('topbar', 'foundation-mq-topbar');

to

self.register_media('topbar', 'topbar-breakpoint');

As said, I am at a loss to understand why this works, maybe someone who knows what they're talking about could shed some light on it, it was more luck than judgement in my case...

Rafi Benkual almost 5 years ago

Changing the topbar breakpoint with the css version requires changes in 3 spots. Use the foundation.css stylesheet.

Say you always want the mobile menu,

About line 1662

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

About line 3714

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

And about line 1436

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

Rafi Benkual almost 5 years ago

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.

Jason Miller about 4 years ago

I am having the same issue.

My company has decided we will use the top bar navigation functionality, but want to have the mobile menu on all medium sized screens.

I am using the CSS version and have changed the two breakpoints in foundation.css

meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:60em)/";
width: 60em; } <!-- I changed this from the 40.063em to accomodate all tablet sized screens

@media only screen and (min-width: 60em) { <!-- I changed this from 40.063em
.top-bar {
background: #333333;
overflow: visible; }

The styles are doing what I want them to do, but the Javascript isn't activated when I click the toggle-top-bar menu-icon unless it is within the 40.063em range. Looking in the firebug console the class 'expanded' isn't being added so this is why I think something is either wrong with the javascript

Pressly Bonner about 4 years ago

@jason
I had to change the following (foundation 5.4.7 css version) to change the breakpoint

1) Search for "meta.foundation-mq-topbar" (~ line 1741) and modify both widths. It appears information is being passed in the font family, when I did NOT change that value, javascript did not kick in"
2) Search for "@media only screen and (min-width: 40.063em) { .top-bar {" (~ line 2062) and change value there
3) Search for "@media only screen and (max-width: 40em) { .top-bar" (~line 1796) and change value there.

Worked for me!