モバイルナビゲーションメニューはデスクトップに表示されますが、モバイルではありません - 編集：画像が追加されました

Question

juniorgoldreport.comは私が取り組んでいるウェブサイトで、wordpressで作成されています。 私はこのプラグインを特に使用しています - http://shiftnav.io/free/

モバイルナビバーのプラグインは信じられないほどの機能性と使いやすさを大いに楽しみます。

ツールバーを表示する設定をしているので、960ピクセルで表示することにしました。私がやった唯一の変化。

デスクトップウィンドウのサイズを変更すると、navbarが表示されます（私は、新しいものを作成するときにヘッダーと古いナビゲーションを削除するために必要な変更を行っていません）。これまでのところ素晴らしい。

問題は、モバイルビューでは、navbar doesnt apearです。私は、プラグインが

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

対

@media (max-width:960) 

を使用していると仮定するつもりです。しかし私は全くわかりません。誰でも何が起こっているのかについて考えている？

EDIT - あなたの理解を深めてください。

デスクトップウィンドウがreziedされるナビゲーションバー - それはapears（イェーイ）

ナビゲーションバーはしかし、モバイルデバイス上でつくれません - 私はよく分からない理由

Answer 1

要するに、ビューポートメタタグが存在しないため、サイトは実際に反応しません。そのため、サイトはモバイルデバイス上で960ピクセル幅で表示されます。これはブレークポイントの上にあるので、メニューは表示されません。

問題は、あなたのサイトの頭の中でこのタイプミスです：

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

キーワードメタ持つ2つの構文エラー行方不明「=」「名前」、およびクロージングの欠如>として

後その結果、ビューポートタグはブラウザによって決して読み取られないので、効果はありません。ビューポートタグがなければ、ビューポートは応答するのではなく、モバイルデバイス上でスケーリングされて表示されます。モバイルビューポートは960ピクセル幅で表示されるため、メディアクエリは適用されず、メニューはデスクトップ画面と同じように非表示のままです。

最初のmetaタグに構文エラーを修正し、問題を解決しました。

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