http://foundation.zurb.com/develop/download-f3.html

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...

Well I found a solution, can't explain why this works but it did so I thought I'd share...

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 but thought it might help anyone who is having similar issues.

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

Hi Rafi

Thanks for the reply. I have tried the custom download setting the topbar breakpoint to the required width but it doesn't appear to make any difference unless I am missing something. I'm trying to set it at 900px but the JS doesn't kick in until reduced to 640px.

As said, am I missing something?