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

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など グローバルメニューをスマホで非表示にしたいです。

このトピックには5件の返信が含まれ、2人の参加者がいます。1 週前 torui さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #57473

    torui

    こんにちは。
    グローバルメニューをスマホでは非表示に刷るにはどのようにすればよいのでしょうか?

    デザインもかなり崩れてしまっているのでかなり不恰好になっております。
    http://singer-mixer.com/

    このようにmobile.cssに記載しても表示されたままでした。
    #mobile-menu {
    display: none;
    }

    デフォルトでは非表示となっていると思いますが、なかなか消えてくれません。。。
    度々申し訳在りませんが、よろしくお願いいたします。

  • #57477

    かうたっく

    スマホのスタイルの崩れたグローバルメニューを消したい場合は子テーマに書いてある

    /*------------------------------------
    ■■グローバルナビデザイン カスタマイズ■■
    ------------------------------------*/ 

    子テーマ側で表示させてたようで、上記項目より下を消すと表示しませんよ。

    ≡のメニューを消したい場合は、以下をstyle.css・またはresponsive.cssに書くと消えます。

    #mobile-menu {
        display: none;
    }

    完全レスポンシブを有効にしている場合はmobile.cssを読み込まないので反映されないと思います。

  • #57485
    わいひら
    わいひら
    キーマスター

    グローバルメニューというのがグローバルナビのことであれば、以下のように書く必要があるかと思います。

    #navi {
        display: none;
    }

    レスポンシブ環境で、好みの横幅で非表示にするには、メディアクエリを使用してください。
    メディアクエリの利用 – CSS | MDN

  • #57486

    かうたっく

    なるほど。確かにそう言う事ですね!

    ■■グローバルナビデザイン カスタマイズ■■ とコメントしているうえに以下を加えてください。

    @media screen and (min-width:1111px) {
    以下の上に上記CSS追加

    /*------------------------------------
    ■■グローバルナビデザイン カスタマイズ■■
    ------------------------------------*/ 

    それから現状、最後のスタイルの後ろに以下を加えてください

    .clearFix {
    min-height: 1px;
    }

    この下に以下を追加。
    }

    これでPCのみで反映する書き方になります。

    #57477では、PCビューを確認してませんでした^^;

  • #57487

    かうたっく

    #57485の場合

    @media screen and (max-width:1110px) {
    /* ここに、わいひらさんのコード */
    }
  • #57489

    torui

    無事モバイルの方で消すことができました。
    ありがとうございます!!

トピック「グローバルメニューをスマホで非表示にしたいです。」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)