Menu icon Foundation
Topbar breaks when viewed at tablet size

Hi folks,

I'm new to Foundation 5 and can't understand why my topbar breaks when viewed at tablet size.

My markup is pretty straight forward with nothing special or particularly complex going on. I've tried working through it but can't come up with a solution so I'm turning to the group for some insight.

I'm sure that adjusting the media query properties would work but that seems like a needless hack to view a menu on an iPad but I could be wrong.

You can see my markup here: http://codepen.io/WideGlide/pen/JCtpE

a live version is provided here: http://www.nycaafp.org/zzzzz/

In addition, I'm using v. 5.2.1

Thanks in advance for your help,

Tom

Topbar foundation5

topbar

Hi folks,

I'm new to Foundation 5 and can't understand why my topbar breaks when viewed at tablet size.

My markup is pretty straight forward with nothing special or particularly complex going on. I've tried working through it but can't come up with a solution so I'm turning to the group for some insight.

I'm sure that adjusting the media query properties would work but that seems like a needless hack to view a menu on an iPad but I could be wrong.

You can see my markup here: http://codepen.io/WideGlide/pen/JCtpE

a live version is provided here: http://www.nycaafp.org/zzzzz/

In addition, I'm using v. 5.2.1

Thanks in advance for your help,

Tom

Topbar foundation5
Steve Trask about 5 years ago

Hi Tom,

Simply put - you have a lot in there so the width is wider than the space available when reducing down in size, there are a couple of options to make this work.

  1. Change the breakpoint of the top-bar to 900px so it collapses to mobile view at an earlier stage not to show the break.

  2. Reduce padding, spacing show smaller images at a medium size to reduce width but not affect UX and touch UX and also do the above but at a smaller size.

  3. If you need to display them at a certain size break the right ul onto a new line taking up the full width so it is intentional. just add - clear:both; width: 100%; to the right ul on a custom media query between the break and small menu size.

Personally I would go for number three with some tweeks so it takes advantage of the full width, this then does not affect UX and still has everything on display.

Hope this helps

Steve

Rafi Benkual about 5 years ago

It's simply a matter of too many things in the topbar for the list items to fit. You will need to change the topbar breakpoint.

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.

Steve Trask about 5 years ago

Hi Tom,

Thanks for the email, here is an example of number 3 to get you underway:

http://cdpn.io/gEoIy

Hope this helps

Steve

Tom Hogan about 5 years ago

Steve and Rafi,

Thanks for your solutions!

I appreciate your time and help.

Tom