Menu icon Foundation
Top-bar menu truncated in Mobile

Hi there,

I have a problem with the Top-bar menu on a Mobile device.

When I view our site on a desktop a mobile simulating viewport (<480px width), it is showing the menus correctly as expected.

However, when I actually view the site on a mobile device, the menus are being truncated.

The site is www.sprachspielspass.de

I have tested it on Safari Mobile & Chrome Mobile.

Screen shot 2015 09 28 at 18.48.06

Img 3953

top-barmobile

Hi there,

I have a problem with the Top-bar menu on a Mobile device.

When I view our site on a desktop a mobile simulating viewport (<480px width), it is showing the menus correctly as expected.

However, when I actually view the site on a mobile device, the menus are being truncated.

The site is www.sprachspielspass.de

I have tested it on Safari Mobile & Chrome Mobile.

Screen shot 2015 09 28 at 18.48.06

Img 3953

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

Rafi Benkual almost 4 years ago

Looks like the link is not working. Are you using top-bar for this? We'll need to see the link or the html and CSS to help you more.

Francis Chung almost 4 years ago

Hi Rafi,

I've correct the URL in the original post. Sorry about that.

For your convenience, it's www.sprachspielspass.de

FYI the Top-bar is wrapped inside a grid (row columns large-9 small-6 i think).

Chris Oyler almost 4 years ago

I just had a look on both mobile browsers and did not have the same problem. What device / version of os are you using?

Francis Chung almost 4 years ago

Hi Chris,

Thanks for looking. I think the problem was caused by the grid that was housing it.
Increasing the size from Small-6 to Small-7 seems to have fixed it.

We're having too many issues with Top-bar on mobile because of our long menu names, so we're planning to replace it was an off canvas menu.