Menu icon Foundation
F 5 top bar issues

Foundation 5

The top bar moves into two rows when screen size goes below 768px,

Top bar

On the iPhone 4S, the dropdown menu doesn't let you scroll - so it fills the screen but you can't scroll down to get to the end of the menu.

Ideas anyone?

Many thanks!

topbar

Foundation 5

The top bar moves into two rows when screen size goes below 768px,

Top bar

On the iPhone 4S, the dropdown menu doesn't let you scroll - so it fills the screen but you can't scroll down to get to the end of the menu.

Ideas anyone?

Many thanks!

James Gehring over 5 years ago

Can you supply a live link or post the code you are using?

Shelley over 5 years ago
James Gehring over 5 years ago

Did you find a solution? I checked it on a iphone4 and everything worked fine. For the menu sizing it goes into two rows because the screen size. The elements have to go somewhere so they start to stack, if that makes since. Also I see you are using foundation.min.js, It includes foundation.topbar.js and foundation.orbit.js so you don't need to call them again.

Shelley over 5 years ago

Hi James,

It should convert to the small screen menu, rather than stack. It is fine (using the small mobile menu) on the iPhone 4S, but not on tablets.

Thanks for that info on the foundation.min.js! :)

Ashley Swartz over 5 years ago

I have the same problem and I have no idea what to do. It's interesting because the Foundation templates page does the exact same thing along with the grid template.

http://foundation.zurb.com/templates.html
http://foundation.zurb.com/templates/grid.html

The grid template did not do that in 4, it immediately collapsed to the small menu when the two sides hit. Now the two sides stack before collapsing to the small menu. I've tried several random things to resolve the issue but have found no solution.

If you want to see the grid template stack on a tablet, it does this immediately on an iPad Mini.

Robert Loftis over 5 years ago

The only things that seemed to help me eliminate the stacking of topbar items when resizing is :

  1. Use less menu items (which is not really a solution, as most people have more than a few)
  2. Change 40.063em values associated with the top bar. I changed all of mine to 43.063em and it fixed the problem. Only change the entries associated with the top bar because if you change all of them, you will switch into your next screen size sooner.

Here are the entries to change:

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

AND

@media only screen and (min-width: 40.063em) {
  .top-bar {
...

Hope that helps.

Ashley Swartz over 5 years ago

I tried that out on mine and it still didn't fix it for me but thank you for the suggestion. I'm going to get everything updated to 5.2 today to see if that resolves it so hopefully someone noticed there was an issue and the top bar will be happy again. I just can't figure it out myself.