Webサイト制作&キャラクターデザイン

  1. ブログホーム
  2. WordPress
  3. WordPressコアブロックのナビゲーションブロックのブレークポイントを変更する

WordPressコアブロックのナビゲーションブロックのブレークポイントを変更する

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