Menu icon Foundation
Changing Topbar breakpoint using css?

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 this particular case, adjusting the CSS isn't a problem and is behaving as expected, what doesn't appear to be working is the Javascript, it still only kicks in at the default breakpoint. I have seen posts referring to the meta.foundation-mq-topbar value but changing this makes no apparent difference.

Is it possible to change the value at which the Javascript kicks in using CSS? I tried using the custom topbar breakpoint in the custom CSS download but this didn't make any apparent difference either.

Thanks in advance.

Paul

topbarbreakpointcss

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 this particular case, adjusting the CSS isn't a problem and is behaving as expected, what doesn't appear to be working is the Javascript, it still only kicks in at the default breakpoint. I have seen posts referring to the meta.foundation-mq-topbar value but changing this makes no apparent difference.

Is it possible to change the value at which the Javascript kicks in using CSS? I tried using the custom topbar breakpoint in the custom CSS download but this didn't make any apparent difference either.

Thanks in advance.

Paul


Tracey G gave the most helpful answer for this post
Tracey G over 5 years ago

I have found a way to do this using CSS and Foundation 5.

First of all, I tried the same way that Deb and bill had tried, by making the changes in foundation.css (as advised above). Didn't work.

Then I noticed that the same calls are made in app.css. I changed my widths in this file, and presto - it worked!

So, in app.css:

Line 4669

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

Line 4957

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

-- change the width and min-width settings to whatever width you want for the breakpoint.

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

Rafi Benkual over 5 years ago

The easiest way to do this is to use the custom download and set that width there. The topbar css is linked to a media query that you need the sass version to adjust.

Hope that helps!

Paul Elphick over 5 years ago

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?

Paul Elphick over 5 years ago

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.

Rafi Benkual over 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; }

bill p over 5 years ago

I am having the same problem. This solution does not seem to match the current version. For example, meta.foundation-mq-topbar only appears once in the foundation.css but you have suggested there is two lines where it needs to be changed.

I have found two of the three places you mention, and even when I set it to 9999px, the menu button does not show up until 40em.

Why is such a basic function so frustrating in Foundation 5, when it was an easy change in Foundation 4?

Deb Smith over 5 years ago

I'm in the same boat as bill p,

I followed the instructions in changing the:

@media only screen and (min-width: MY BREAKPOINT HERE)

as well as

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

I see no third instance to fix and mine does not work with just changing in these two places. The menu disappears when it hits my break but the small screen menu icon doesn't show up until the window width hits the original breakpoint of 40.063em.

Any other suggestions (NOT using scss) are greatly appreciated.

Tracey G over 5 years ago

I have found a way to do this using CSS and Foundation 5.

First of all, I tried the same way that Deb and bill had tried, by making the changes in foundation.css (as advised above). Didn't work.

Then I noticed that the same calls are made in app.css. I changed my widths in this file, and presto - it worked!

So, in app.css:

Line 4669

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

Line 4957

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

-- change the width and min-width settings to whatever width you want for the breakpoint.

James Smith over 5 years ago

I found a solution to this using Rafi's instructions with one tweak. Rafo said to change the code in three spots:

@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; }

Unfortunately the one around 3714 does not exist in my css file. So, I added it right under that media query around that line at 3716. I put

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

This worked perfectly.

Lynda Spangler over 5 years ago

In the latest version (5.2.1 as of this writing) what Rafi mentioned is a bit different. If you can search the CSS and find any reference to topbar as Rafi mentioned and change the value for those it works. I didn't need to add an extra line, just change what is in the CSS.

Mark Smallman over 5 years ago

Is there a way we can set this in a child-theme?

Hans van Derhoffer over 5 years ago

Paul Elphick above forget to add that one have to change just one more thing in foundation.css which is:
@media only screen and (min-width: XXXXXem) {
.top-bar {...
it works perfectly and one don't have to search for diffrent solutions :)

Fred Rivett almost 5 years ago

Hi all,

Thanks so much for the above. Really helpful.

I did as Rafi suggested and it kinda worked. The thing that stopped it from working is this bit of code, you may have something similar:

<nav class="top-bar contain-to-grid" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name show-for-small-only">
      <h1><a href="#">Site Title</a></h1>
    </li>
    [...]

Swap that 'show-for-small-only' out to 'show-for-medium-down' and it should work as expected. Without that tweak it just showed me the first list item which isn't what I want!

Evan Smith almost 5 years ago

I've tried the above but the css changes don't work for the current version.

Does anyone know how to change the topbar breakpoint with css in the latest update?

Thanks.

Daniel Kesberg almost 5 years ago

Hey Evan, i just did this with Version 5.4.7 and its working for me.

Lines 1741 - 1743:

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

Line 2062

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

This gives me a mobile navbar for the tablet version