グローバルメニューをスマホで非表示にしたいです。

PR 2017/12/7

このトピックには5件の返信、2人の参加者があり、最後にtoruiにより8年、 11ヶ月前に更新されました。

5件の返信スレッドを表示中

投稿者

投稿
- 2017年12月6日 1:11 AM #57473
  
  torui
  ゲスト
  
  こんにちは。
  グローバルメニューをスマホでは非表示に刷るにはどのようにすればよいのでしょうか？
  
  デザインもかなり崩れてしまっているのでかなり不恰好になっております。
  http://singer-mixer.com/
  
  このようにmobile.cssに記載しても表示されたままでした。
  #mobile-menu {
  display: none;
  }
  
  デフォルトでは非表示となっていると思いますが、なかなか消えてくれません。。。
  度々申し訳在りませんが、よろしくお願いいたします。
- 2017年12月6日 6:54 AM #57477
  かうたっく
  ゲスト
  スマホのスタイルの崩れたグローバルメニューを消したい場合は子テーマに書いてある
```
/*------------------------------------
■■グローバルナビデザイン カスタマイズ■■
------------------------------------*/ 
```
  子テーマ側で表示させてたようで、上記項目より下を消すと表示しませんよ。
  
  ≡のメニューを消したい場合は、以下をstyle.css・またはresponsive.cssに書くと消えます。
```
#mobile-menu {
    display: none;
}
```
  完全レスポンシブを有効にしている場合はmobile.cssを読み込まないので反映されないと思います。
- 2017年12月6日 7:41 PM #57485
  わいひら
  キーマスター
  グローバルメニューというのがグローバルナビのことであれば、以下のように書く必要があるかと思います。
```
#navi {
    display: none;
}
```
  レスポンシブ環境で、好みの横幅で非表示にするには、メディアクエリを使用してください。
  メディアクエリの利用 – CSS | MDN
- 2017年12月6日 8:08 PM #57486
  かうたっく
  ゲスト
  なるほど。確かにそう言う事ですね！
  
  ■■グローバルナビデザインカスタマイズ■■　とコメントしているうえに以下を加えてください。
  
  @media screen and (min-width:1111px) {
  以下の上に上記CSS追加
```
/*------------------------------------
■■グローバルナビデザイン カスタマイズ■■
------------------------------------*/ 
```
  それから現状、最後のスタイルの後ろに以下を加えてください
```
.clearFix {
min-height: 1px;
}
```
  この下に以下を追加。
  }
  
  これでPCのみで反映する書き方になります。
  
  #57477では、PCビューを確認してませんでした＾＾；
- 2017年12月6日 8:11 PM #57487
  かうたっく
  ゲスト
  #57485の場合
```
@media screen and (max-width:1110px) {
/* ここに、わいひらさんのコード */
}
```
- 2017年12月6日 10:53 PM #57489
  
  torui
  ゲスト
  
  無事モバイルの方で消すことができました。
  ありがとうございます！！
投稿者

投稿