Menu icon Foundation
Customize topbar breakpoint in scss

Hey Team! Ben emailed us a question about the topbar breakpoint. I'm sure this is useful to many of you.

--

Hi there,

I've set up a site using Foundation 5 - http://www.sunnysideinstantlawn.com.au/

The trouble is the top bar does not kick into the mobile version on the portrait view on an iPad.

I have adjusted the min width value for both the meta.foundation-mq-topbar and the section.tab-bar-section which adjusts the style correctly, but the mobile menu icon then does not function.

Earlier versions of foundation allowed this adjustment within the CSS as I have modified it for earlier sites, but it seems something has changed in Foundation 5.

I have looked in the forums and scoured the web for an answer to this, but have not found a solution. Only references for how to modify if using SASS.

Can someone please assist in how to adjust the top bar breakpoint for it to kick into the mobile version when viewed in portrait on an iPad.

Many thanks,

Ben

settingstopbarbreakpointmedia query

Hey Team! Ben emailed us a question about the topbar breakpoint. I'm sure this is useful to many of you.

--

Hi there,

I've set up a site using Foundation 5 - http://www.sunnysideinstantlawn.com.au/

The trouble is the top bar does not kick into the mobile version on the portrait view on an iPad.

I have adjusted the min width value for both the meta.foundation-mq-topbar and the section.tab-bar-section which adjusts the style correctly, but the mobile menu icon then does not function.

Earlier versions of foundation allowed this adjustment within the CSS as I have modified it for earlier sites, but it seems something has changed in Foundation 5.

I have looked in the forums and scoured the web for an answer to this, but have not found a solution. Only references for how to modify if using SASS.

Can someone please assist in how to adjust the top bar breakpoint for it to kick into the mobile version when viewed in portrait on an iPad.

Many thanks,

Ben


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

Hi Ben,
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.

Rafi Benkual almost 6 years ago

Hi Ben,
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.

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

Ben Viall almost 6 years ago

Thanks for this, but I'm not using SASS.

How would you go about changing this using the default CSS version?

I found the CSS to modify its appearance (as per post) so it looks as though it should work, but the burger menu icon does not drop. This is unlike the previous version, as when I changed the CSS before the menu behaved accordingly.

Any help would be much appreciated.

Many thanks, Ben

Will Barker almost 6 years ago

oh, sorry, just realised the media query is acutally apply the topbar, default is hamburger menu (mobile first) so targeting landscape ipad or wider, considering retina (so use device widths)

$topbar-breakpoint: 768px !default; // Change to 9999px for always mobile layout
$topbar-media-query: "
only screen and (min-width: 800px),
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)" !default;

Will Barker almost 6 years ago

of course if you are going to do that, you need to override the sass that hides the duplicated top menu item in its sub menu, so you can get to top pages:

  @media only screen
  and (min-device-width : 768px)
  and (max-device-width : 1024px)
  and (orientation : landscape) {
    .top-bar-section ul li .js-generated {
     display: block !important;
    }
  }

Simen Schikulski over 5 years ago

This is not working for me. The problem is that .top-bar .toggle-topbar is set to display: none at @media only screen and (min-width: 40.063em) even though I've set the following:

$topbar-breakpoint: (880px) !default; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;

Anyone thoughts?

A single variable that changed the breakpoint and icon would be nice. I guess that's what they tried with $topbar-breakpoint.

Jonathan Melville over 5 years ago

This suggestion just doesn't work, there is something else wrong. Even when you make the change in the settings file, the menu is still not trigger until the window hits 640px.

Rothrock over 5 years ago

I came here to find the same thing. Thanks for the tip, I'll give it a try tomorrow...

Tim Smith over 5 years ago

We are using foundation in a ruby on rail environment and do not have access to the foundation scss files.

Instructs the user to make changes to _settings.scss. I don't have access to that file.

How can I change the breakpoint in a rails env?

Lars Bratke about 5 years ago

You have to uncomment the media query ranges in your _settings.scss so you can use those variables below for the top-bar.

In your case $large-range, $screen and $large-up. Search for "d. Media Query Ranges" in your _settings.scss.

I'm not sure why you have to do so in this case, but it works...

Uzi Ashkenazi over 5 years ago

Same problem here. I am using the sass bower install.

Carly Henry about 5 years ago

The top-bar doesn't respond to changes in _settings.scss, so I've left all the media-queries commented out.

In the _top-bar.scss file, I've changed

$topbar-breakpoint: #{lower-bound($large-range)} !default; // Change to 9999px for always mobile layout
$topbar-media-query: $large-up !default;

And now it works correctly. Any ideas why?

Edit: I'm using the bower install.

Will Barker almost 6 years ago

is there a sass solution for this with retina ipads? min-width for retina ipads is double.

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://stephen.io/mediaqueries/

Generally, portrait tablet down is the "small" we need to target for most designs.

banacan about 5 years ago

I have been following this thread because I wanted to use $topbar-breakpoint and $topbar-media-query to force the mobile version below $large-up (I even started my own thread looking for answers). I was able to hide the desktop navigation using those variables but I was frustrated because I could not get the hamburger icon and mobile menu to show up until around 560px.

I found that my problem was caused by adding foundation.css as well as apps.css to my page. Because I was already including foundation.scss in apps.scss, once compiled, all of the necessary css was within my apps.css. So adding foundation.css was over-writing my customizations – at least with regard to displaying the mobile menu below $large-up. Once I removed foundation.css from my page, everything works exactly as expected.

I sure hope this helps others, as this issue was driving me nuts.

Ed Pritichard over 5 years ago

I'm having the same problems at Jonathan Melville here. Even though I make the suggested change to the sass, and the menu icon appears when I want it to, it does not function. Clicking on it does not open the mobile menu.

What am I doing wrong??