0

I'm using CSS media queries to display a mobile menu instead the standard menu when the viewport initially is under 900 pixels. The menu is a combination of CSS media queries and some JavaScript (the ShiftNav plugin for Wordpress, specifically).

On a device where the portrait view is under 900px, the mobile view is triggered (correctly). However, when you open the mobile menu and change the orientation on the tablet to landscape, the viewport is larger than the 900px cutoff. The standard menu will display as well as the mobile menu and the design looks bad.

What is the best way to hide the mobile menu when someone turns the tablet around?

Stevie
  • 189
  • 1
  • 2
  • 15
  • Could you provide some code please, especially the different media queries. No need for the code itself, just the media queries with quick comments about what you think happens. – tleb Feb 22 '15 at 00:23
  • I would take a look at David Walsh's approach. [Another Device Orientation Question](http://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad) Cheers –  Feb 22 '15 at 00:39
  • 1
    @Dnwebdev Thanks for the help - I used a variation of this with the built-in JavaScript API for the plugin to close the mobile menu! – Stevie Mar 01 '15 at 01:12

0 Answers0