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

2024年3月14日2024年3月15日

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表示のとき、グローバルメニューの右端に

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