Actually the proper solution is scaling media queries utilizing elements to determine layout width instead of screen resolution. You need at least 2 steps before displaying a mobile menu. Mobile menu should only come on phones or mini tablets. I've done this on another website. Below is the solution I have found works well.
/* Tables and Phones - collapse sidebar, etc. */
@media all and (max-width: 68em) { ... }
/* Phones only - hide wide menu, display mobile menu, etc. */
@media all and (max-width: 45em) { ... }Below are additional media queries if you want to get into more specific styling for very specific type of displays:
/* Desktops only */
@media all and (min-width: 68.01em) { ... }
/* Tablets and Desktops */
@media all and (min-width: 45.01em) { ... }
/* Tablets only */
@media all and (min-width: 45.01em) and (max-width: 68em) { ... }