Menu icon Foundation
F5 Topbar Mobile Menu Toggle Issue

Hi all! Ever since switching over to 5, my menu toggle button has been displaying incorrectly. It's fully functional, but it's halfway off of the screen on any mobile layout, and the "MENU" text isn't displaying at all, though it's clearly in the HTML. Is this a CSS margins issue, or is there another problem?

One interesting thing that I've noticed is that even the examples on the F5 Documentation are experiencing this issue, it's not just my site.

Note that I'm not talking about the off-canvas navigation toggles, those (presumably; I don't have them on my site) are working fine everywhere I've seen them. But take a look at the traditional toggles on the topbar page of the f5 documentation. http://foundation.zurb.com/docs/components/topbar.html

Any pointers?

topbartogglemobilemenudisplayhalf

Hi all! Ever since switching over to 5, my menu toggle button has been displaying incorrectly. It's fully functional, but it's halfway off of the screen on any mobile layout, and the "MENU" text isn't displaying at all, though it's clearly in the HTML. Is this a CSS margins issue, or is there another problem?

One interesting thing that I've noticed is that even the examples on the F5 Documentation are experiencing this issue, it's not just my site.

Note that I'm not talking about the off-canvas navigation toggles, those (presumably; I don't have them on my site) are working fine everywhere I've seen them. But take a look at the traditional toggles on the topbar page of the f5 documentation. http://foundation.zurb.com/docs/components/topbar.html

Any pointers?

Sam Linville over 5 years ago

Ah! Thanks so much!

Wing-Hou Chan over 5 years ago

Hey Sam!

This issue is already recognized in the Forum, the solution is posted here:

http://foundation.zurb.com/forum/posts/2364-toggle-topbar--menu-icon-cut-off