Foundation-
14Replies
-
Changing Topbar breakpoint using css?
By Paul Elphick
Hi, first of all - big up ZURB for an amazing product! I have a question about the topbar in foundation 5 using CSS. I have been searching the forum and the web for an answer on customising the topbar breakpoint, I need to use a wider setting in thi... (continued)
Last Reply by Daniel Kesberg over 4 years ago
You commented on
Torsten Mueller's post
about 5 years
You commented on
Sander Schaeffer's post
about 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
about 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
about 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?
No Content
-
No Content
-
No Content
http://foundation.zurb.com/develop/download-f3.html