WordPressテーマ「SWELL」では、PC表示のグローバルメニューデザインが下記のようなテキスト表示になっています。
ハンバーガーメニューにするカスタマイズは標準では用意されていません。
そこで今回は、PC表示でもハンバーガーメニューにカスタマイズする方法をご紹介します。下記のような画面になります。
ちなみにハンバーガーメニューを開くと、下記のような形になります。
今回のカスタマイズでは、極力コードを簡単にするためにヘッダー設定を固定させていただきます。下記の設定にすることで、正常に動作します。
- ヘッダーレイアウト（PC） = ヘッダーナビをロゴの横に（右寄せ）
- ヘッダーのレイアウト（SP） = ロゴ左/メニュー右
- ヘッダーの追従 = PCはなし、SPはどちらでもOK
- 検索ボタンの表示位置： = 両方とも「表示しない」（ハンバーガーメニュー内に検索バーを入れます）
カスタマイズ自体はCSSのみで割と簡単にできますので、ぜひお試しください。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
