Menu icon Foundation
Mobile Menu Toggle Inactive In Tablet

Using Foundation 5.5 with CSS, I adjusted thetop-bar breakpoints to be 62.0163em, so it appears on tablet devices (I have a somewhat wide top-bar nav.) The menu bar with the icon appears in tablet width, but the icon doesn't toggle the menu. Toggle works fine in small, site works fine in large, but the menu won't toggle in that in between point. I've attached the code for perusal (first is HTML, second is foundation css, third is foundation-app). Thanks.

toggletop-bartabletbreakpoint

Using Foundation 5.5 with CSS, I adjusted thetop-bar breakpoints to be 62.0163em, so it appears on tablet devices (I have a somewhat wide top-bar nav.) The menu bar with the icon appears in tablet width, but the icon doesn't toggle the menu. Toggle works fine in small, site works fine in large, but the menu won't toggle in that in between point. I've attached the code for perusal (first is HTML, second is foundation css, third is foundation-app). Thanks.

Rafi Benkual over 4 years ago

This post will help you http://zurb.com/university/lessons/de-coding-top-bar-customizations

Note: I deleted your code since it's too long and unnecessary for the solution.

Spencer Williams over 2 years ago

I read that post and initially I was not getting the Top Bar's Menu link to respond to the click event to open it. It turned out I was setting the wrong viewport size. Also, this user's comment makes clear that all of those values need to be changed, although I did not need to find the third @media rule they mentioned.