Menu icon Foundation
toggle-topbar / menu-icon cut off

Both in Firefox and Chromium I have trouble with the toggle-topbar / menu-icon link to show the topbar menu items in a narrow browser window. I first thought that my (still simple) HTML has an error but the problem also appears in the official documentation at http://foundation.zurb.com/docs/components/topbar.html#clickable

I can drag the cut menu-icon to the left and then see the word "MENU" so it's there but somehow moved too far to the right.

The Foundation version is what I pulled today from https://github.com/zurb/bower-foundation. Not sure which version I have. I guess some 5.1 revision.

An example screenshot:

Auswahl 006

menu-icon

Both in Firefox and Chromium I have trouble with the toggle-topbar / menu-icon link to show the topbar menu items in a narrow browser window. I first thought that my (still simple) HTML has an error but the problem also appears in the official documentation at http://foundation.zurb.com/docs/components/topbar.html#clickable

I can drag the cut menu-icon to the left and then see the word "MENU" so it's there but somehow moved too far to the right.

The Foundation version is what I pulled today from https://github.com/zurb/bower-foundation. Not sure which version I have. I guess some 5.1 revision.

An example screenshot:

Auswahl 006
Dave Webb almost 6 years ago

I am having this same exact problem. As of this morning I have tracked it down to the CSS that is processed off of the SCSS. If I swap out the processed CSS with the CSS from the download on the Foundation site, it fixes the problem. What is in the SCSS files that is causing this? Any help would be appreciated!

Eric Sassaman over 5 years ago

Hmm I had to add:

.menu-icon
{
  width: auto; /* hack for menu icon bug */
}

to work around that bug for now, hope that's helpful to someone as a temporary fix.

Sam Smith over 5 years ago
Wing-Hou Chan over 5 years ago

Just found this thread!

I posted the "alternative hack" on Sam's thread and I'll post it here as well:

You need to change the width for .menu-icon to auto, as Eric said. It's line 4151 in foundation.css, if anyone is using Foundation CSS.

To change it in the SCSS file you need _offcanvas.scss and you need to change line 279 from $tabbar-height to auto. $tabbar-height is referenced in line 13 of _offcanvas.scss and is required for some other OffCanvas stuff so don't change the remcalc(). Line references are for Foundation 5.1.x . Not sure if they are different in older versions.

Maybe I should do a PR ;)

Hope this helps!