Mobile navigation menu shows on desktop but not mobile - edit: images added

Question

juniorgoldreport.com is the website I'm working on and it's made in wordpress. I'm using this plugin specifically - http://shiftnav.io/free/

The plugin for mobile nav bar is incredible, I enjoy it's functionallity and ease of use greatly.

It has a setting to set when to show the toolbar, I chose to show it at 960px. The only change that I have done to it.

When I resize my desktop window, the navbar apears (I haven't done the necessary changes to remove the header and old nav when making the new one apear). So far so great.

The issue is, on mobile view, the navbar doesnt apear. I'm going to assume the plugin is using

@media (max-width:960) 

vs

@media on screen and (max-device-width:960)

But I'm not totally sure. Anyone have any idea's as to why it's happening?

EDIT - images to get you a better understanding.

The nav bar when a desktop window is rezied - it apears (yay)

The nav bar DOES NOT apear on mobile devices though - I'm not sure why

Answer 1

In short: your site is not actually responsive, because the viewport meta tag is missing, so the site displays at a 960px width on mobile devices. Since that is above the breakpoint, the menu does not display.

The issue is this typo in your site head:

<meta name"Keywords" content="Gold reports resource stock news and top gold articles" 
<meta name="viewport" content="width=device-width">

The Keywords meta has two syntax errors a missing '=' after 'name', and a lack of closing >

As a result, the viewport tag is never read by the browser, so it has no effect. Without the viewport tag, the viewport is displayed scaled on a mobile device, rather than responsively. Since the mobile viewport is displayed at 960px width, the media query does not apply, and the menu remains hidden as it would on a desktop screen.

Fix the syntax errors in the first meta tag and the issue is resolved.

<meta name="Keywords" content="Gold reports resource stock news and top gold articles">
<meta name="viewport" content="width=device-width">

Hope that helps