[土居 安佳里]

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

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

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

♥ 1

いいねをした人: 居ません

[キタジマ タカシ]

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

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

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

♥ 0

いいねをした人: 居ません

[土居 安佳里]

やはりそうなんですね。

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

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

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

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

♥ 0

いいねをした人: 居ません

[土居 安佳里]

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

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

/* （例）グローバルメニューを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

いいねをした人: 居ません

[キタジマ タカシ]

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

です！まさにそれです！

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

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

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

♥ 0

いいねをした人: 居ません

[土居 安佳里]

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

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

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

♥ 0

いいねをした人: 居ません

[投稿者]

投稿