ハンバーガーメニューの出現ポイントを変更したい

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #6326
    土居 安佳里
    参加者
    3

    現在ハンバーガーメニューに切り替わるのが1024px未満になっているかと思います。

    一行メニューにしたときなど、もっと早くハンバーガーメニューにしたいときがあるのですが、CSSを上書きしていくしか方法はないでしょうか。

    スマートな解決策がもしかしてあるのかもと質問してみました!

    0
    #6327
    キタジマ タカシ
    キーマスター
    286

    あーそうですね、上書きするしかないです…。

    ヘッダーの中で .u-hidden-lg-up.u-visible-lg-up のようなクラスを使って出したり消したりしているので、それを上書きする感じになりますが、display: nonedisplay: block を切り替えるようなやりかたじゃないめんどくさい方法をしてしまっているので、結構めんどくさいかもしれません…。

    細かく調整しなくて良いのであれば、ヘッダーのテンプレート (template-parts/1row-header.php など) を子テーマにコピーして、.u-hidden-md-up.u-visible-md-up に書き換えれば、PCサイズ(1024px)じゃなくてタブレットサイズ(640px)を基準にできます。ただ、こっちもこっちでアップデートのたびにヘッダーの HTML 構造がかわってないかは確認しないといけないと思うので、これはこれでめんどくさいかもしれません…。

    0
    #6328
    土居 安佳里
    参加者
    3

    やはりそうなんですね。

    1100とか1200とか、もっと早くハンバーガーにしたいので、その場合はCSSしかなさそうですね。

    確かに普通にdisplay:noneとかじゃないなーと思ってました(笑)
    なんか難しいことしてはるなーと。
    ちょっと見てみます。ありがとうございました!

    0
    #6330
    キタジマ タカシ
    キーマスター
    286

    お急ぎでなければ、明日か月曜とかにサンプルコード書いてみますよ!

    0
    #6331
    土居 安佳里
    参加者
    3

    あ、今もう一回トピック開いて書こうかと思ってたところでした。
    他にも困っている方がいるかもしれないと思ったので…!

    私が解決した方法は以下になりますが、もしもっといい方法があればぜひ教えてください!

    /* (例)グローバルメニューを1286px未満でハンバーガーボタンを表示するように変更 */
    
    @media (min-width: 64em) {
      .u-visible-lg-up {
        position: absolute !important;
        clip: rect(1px,1px,1px,1px) !important;
        speak: none !important;
        visibility: hidden !important;
      }
    }
    
    @media (min-width: 80.375em) {
      .u-visible-lg-up {
        position: static !important;
        clip: auto !important;
        speak: normal !important;
        visibility: visible !important;
      }
    }
    
    @media (min-width: 64em) {
      .u-hidden-lg-up {
        position: static !important;
        clip: auto !important;
        speak: normal !important;
        visibility: visible !important;
      }
    }
    
    @media (min-width: 80.375em) {
      .u-hidden-lg-up {
        position: absolute!important;
        clip: rect(1px,1px,1px,1px) !important;
        speak: none!important;
        visibility: hidden!important;
      }
    }

    ここでタグを書くのこれでいいのかな(;´Д`)
    タブがなくなってしまった。

    要は64emを打ち消さないと変更されないので、打ち消しの記述を入れてから、再度指定したい幅で入力しなおす、という感じで解決されました。

    モバイルメニュー時のようにヘッダー固定されませんが、PCメニューの固定があるので問題ありません。

    どうでしょうか!

    0
    #6335
    キタジマ タカシ
    キーマスター
    286

    要は64emを打ち消さないと変更されないので、打ち消しの記述を入れてから、再度指定したい幅で入力しなおす、という感じで解決されました。

    です!まさにそれです!

    ちょっと冗長なので、こういうユーティリティ系のクラスは別 CSS ファイルにわけて、子テーマで CSS ファイルごと差し替えられるようにしたほうが変更しやすいのかなぁとか思ったりもしたのですが、それはそれでデメリットもありそうなので、今はこのカスタマイズ方法しか思い浮かびませんでした…。

    ここでタグを書くのこれでいいのかな(;´Д`)
    タブがなくなってしまった。

    「テキスト」モードにして、コードを範囲選択し、「code」ボタンをクリックしてから投稿すると pre タグで囲まれてタブもそのままで出力されるはず!

    0
    #6401
    土居 安佳里
    参加者
    3

    おお、これで良かったんですね。

    制作者以外でこういうことをするかどうか微妙なので、今の対応でいいように思います。

    ありがとうございました!

    0
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「ハンバーガーメニューの出現ポイントを変更したい」には新しい返信をつけることはできません。