WordPressでメニューの表示を消す方法&スマホの場合のみ消す方法

この記事では、

  • WordPress(ワードプレス)でメニューの表示を消す方法と
  • スマホの場合のみメニューの表示を消す方法

の2種類をご説明します。

CSSで簡単に非表示にする方法です!

まず、

  • WordPress(ワードプレス)でメニューの表示を消す方法

です。

これはパソコン、モバイルどちらから見た時にも消えます。

ダッシュボード→外観→メニュー→追加CSS

に以下を記入します。

 

#main-navigation {display:none}

 

これでメニューは表示されません!

 

では次に、パソコンではメニューを表示させたいけれど、

  • スマホなどのモバイルではグローバルメニューを消したい

という場合です。

スマホのような小さな画面でメニューがずらりと表示されてしまい、肝心の内容が下の方に表示されるのは少しもったいないですものね!

 

ダッシュボード→外観→メニュー→追加CSS

に以下を記入します。

 
@media (max-width: 479px) {
#main-navigation {display:none} 
}
 
 
 
これは「モバイル(幅が479ピクセル以下)の場合にメニューを消す」
というものです。
 
 
これでパソコンの場合は表示され、スマホなどモバイルでは表示されなくなります。
 
以上です!
 
簡単でしたね!ぜひ使ってみてください。
 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

主婦起業コンサルタント。二児の母。「好きな時に、好きな場所で、好きなことをする!」がモットー。仕事と育児をバランス良く楽しみたい!福岡出身、千葉在住。 詳しいプロフィール→こちら☆