Overview
Make sure your site is using this viewport meta tag in your site <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Almost all themes will already have an optimized viewport meta tag, so 99% of users don’t need to change anything.
Recommendations
It is highly recommended that you use the standard, optimized viewport meta tag recommended for responsive sites by Google and Mozilla. Just having the viewport meta tag is not enough; it needs the width and initial-scale parameters set as above. These are not ShiftNav-specific requirements, but standard recommendations for all responsive, accessible web sites. The optimized viewport meta tag provided above is the one recommended by web standards authorities Google and Mozilla. For reference:
Google recommendations
Mozilla recommendations
What is the viewport meta tag?
The viewport meta tag is a critical component to make your site responsive. It signals to the browser that your site should be responsive, and reflow the content to the device’s dimensions, rather than simply scaling the content down.
Google has a concise and accessible explanation of why this is the optimized viewport meta tag, which I have copied here for reference:
Read the whole article here: Google Web Fundamentals: Responsive Web Design Basics
What happens if I don’t have this viewport meta tag?
If you have no viewport meta tag at all, your site won’t be responsive. Since ShiftNav only displays below a given breakpoint, if your site is not responsive, a mobile device will show the desktop site, and ShiftNav will never display.
If you have a different viewport meta tag, you may experience resizing issues as ShiftNav opens and closes. Including the proper viewport meta tag ensures the browser knows how to properly handle displaying your site on mobile devices when there is off-canvas content such as ShiftNav.