Menu icon Foundation

My Posts


My Comments

Paul Elphick commented on Torsten Mueller's post over 5 years
Paul Elphick commented on Sander Schaeffer's post over 5 years

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

Paul Elphick commented on Paul Elphick's post over 5 years

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.

Paul Elphick commented on Sander Schaeffer's post over 5 years

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

Paul Elphick commented on Paul Elphick's post over 5 years

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?

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Torsten Mueller's post over 5 years
You commented on Sander Schaeffer's post over 5 years

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

You commented on Paul Elphick's post over 5 years

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.

You commented on Sander Schaeffer's post over 5 years

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

You commented on Paul Elphick's post over 5 years

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?

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content