WordPressテーマSANGOの質問

PCブラウザでハンバーガーメニューが表示されない

アバター
yone

お世話になります。
タイトル横のハンバーガーメニューがスマホの幅にしても表示されなくて困っています。
外観>ウィジット>スマホ用ナビドロワーにウィジットを入れていますが
デモページ(https://saruwakakun.design/)と同様の形でメニューが消えてロゴだけになってしまいます。
何を検証して修正すればいいのか分からなくて質問させて頂きました。
宜しくお願い致します。

ウィジェットの設定をしよう:広告の貼り方も解説
コメントへの回答
サルワカくん
サルワカくん
2018/08/12

ハンバーガーメニューは閲覧デバイスを判定してスマホ・タブレット端末であれば表示するような仕様になっております。
(その方が軽くなるため)
そのため、PCブラウザで幅を狭めてもハンバーガーメニューは表示されません。
PCでスマホ表示を確認するためには、Chromeのモバイルエミュレーターなどの機能を使うのがおすすめです。

アバター
yone
2018/08/13

迅速なご回答ありがとうございます。Chromeのモバイルエミュレーターは使用しておりましたがちゃんと使えていなかったみたでスマホ画面では反映されておりました。できないと考えていたのも確認用のipad miniでもpcと同じ表示だった為です。

スマホだけでなくipadでもハンバーガーメニューに変更したいのですが、
その方法をご教示頂けませんでしょうか?

質問が一度で終わらず、大変お手数お掛け致します。

サルワカくん
サルワカくん
2018/08/13

そういうことですね。
768px以上のサイズの端末では、ハンバーガーメニューではなくPCヘッダーメニューが表示されるような仕様になっております。
以下のCSSを子テーマのstyle.cssに追加することで、1030px以下のタブレット端末でもハンバーガーメニューが表示されるようになるかと思います。

@media only screen and (max-width: 1030px) {
  #drawer__open {
   display: none;
  }
  .desktop-nav {
    display: none;
  }
  #inner-header {
    text-align:center;
  }
}
アバター
yone
2018/08/13

簡潔な方法、ありがとうございます!大変助かりました。
素人なので何とも言えませんが3行目は
display: block;
にしたらうまくいきました。

@media only screen and (max-width: 1030px) {
#drawer__open {
display: block;
}
.desktop-nav {
display: none;
}
#inner-header {
text-align:center;
}
}

サルワカくん
サルワカくん
2018/08/13

3行目の部分はちょっと分かりませんが、うまくいったようで安心しました!