Menu icon Foundation
screen resolution of smartphone and Menu icon issue

I have the following issue with Menu icon and navbar.
When I open my site with smartphone with screen resolution 480px , I see the Menu icon and this should be in this way.
My breakpoint is set to 40em.
When I rotate the screen of device (now screen resolution is 960px) and open the site I see again the Menu icon, not the normal menu.
When I open my site with resizer plugin of Chrome and resolution is set to 960px, 768px or 800 I see the normal menu , not the Menu icon (this is the way I want to be).
This is my first site with Foundation 5 and maybe I miss anything
Thanks in advance

mobilemenu icon

I have the following issue with Menu icon and navbar.
When I open my site with smartphone with screen resolution 480px , I see the Menu icon and this should be in this way.
My breakpoint is set to 40em.
When I rotate the screen of device (now screen resolution is 960px) and open the site I see again the Menu icon, not the normal menu.
When I open my site with resizer plugin of Chrome and resolution is set to 960px, 768px or 800 I see the normal menu , not the Menu icon (this is the way I want to be).
This is my first site with Foundation 5 and maybe I miss anything
Thanks in advance

Stephen Sauceda over 5 years ago

You'll need a specific media query to target a device in landscape orientation. The actual resolution of the device doesn't change, just the orientation, so technically the device's width is still 480px.

So you'd need to customize the media queries in _settings.scss to pick up the orientation change of mobile devices when you want. In this case, at 40em, you'd change the $medium-up variable to read:

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)}), #{$landscape}";

This got the result you were describing above (the menu icon in portrait orientation and the full menu in landscape).