SWELLのPC表示のときにハンバーガーメニュー(スマホ開閉メニュー)を表示させるcssカスタマイズ

  • URLをコピーしました!

WordPressテーマ「SWELL」の標準ではSP表示時にしか表示されないハンバーガーメニューをPCでも表示されるようにするカスタマイズです。

ハンバーガメニューの表示位置を設定する

外観>カスタマイズからヘッダーを選択、ヘッダーのレイアウト(SP )から下記のいずれかを選択します。

  • ロゴ:左 / メニュー:右
  • ロゴ:中央 / メニュー:右
  • ロゴ:中央 / メニュー:左

PC表示の場合は右側にハンバーガーメニューを表示したほうがきれいです。

追加するcss

カスタマイズ > 追加cssに下記のcssを追記。

/* pcハンバーガーメニュー */
@media screen and (min-width: 961px) {
    .l-header__menuBtn.sp_ {
        display: block!important;
        position: relative;
        top: 11px; //表示位置
    }
    .p-spMenu {
        display: block!important;
    }
    .p-spMenu__inner {
        max-width: 700px; //幅を設定
    }     
}

これを追記すると下記のようにPC表示のとき、グローバルメニューの右端に

ハンバーガーメニューが表示されます。

実際の表示

閉じた状態

開いた状態

S H A R E
  • URLをコピーしました!