Menu icon Foundation
Topbar tablet portrait issue

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

topbaripadmobileFoundation 5portraittablet

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

Ben Viall over 5 years ago

Awesome, that does the trick!
Thanks Rafi, much appreciated.

Diana Myers over 5 years ago

I'm having the same problem using the Joints WP template for Wordpress on http://206.130.122.55/, but unfortunately the above solution didn't solve the problem for me. The top bar breakpoint won't kick into the mobile version when viewed in portrait on an iPad or Kindle Fire.

It's setup in foundation.css as follows:

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

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

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

Hoping someone can help me with this issue. Thanks in advance!