WordPressコアブロックのナビゲーションブロックはデフォルトではブレークポイントが「600px」に設定されています。現在、WordPressのフルサイト編集ではこのブレークポイントを変更する設定項目はありません。
ナビゲーションブロックのブレークポイントを変更するには次のCSSでメディアクエリーを上書きすることで実現できます。
/* デフォルトのブレークポイント無効化. */
@media (min-width: 600px) {
/* メニューを非表示. */
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}
/* Openボタン(ハンバーガーボタン)を表示. */
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: flex;
}
}
/* 新しいブレークポイント設定. */
@media (min-width: 960px) { /* ※ここの数値を設定したい値に変更する. */
/* メニューを表示. */
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
background-color: inherit;
display: block;
position: relative;
width: 100%;
z-index: auto;
}
/* Openボタン(ハンバーガーボタン)を非表示. */
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: none;
}
}
メディアクエリー「@media (min-width: 960px)」の部分を設定したい数値に変更してご利用ください。
WordPressとテーマは下記を使用しました。
- WordPress6.2
- Twenty Twenty-Three バージョン: 1.1