【SWELL】PCでハンバーガーメニューを表示するカスタマイズ

WordPressテーマ「SWELL」では、PC表示のグローバルメニューデザインが下記のようなテキスト表示になっています。

ハンバーガーメニューにするカスタマイズは標準では用意されていません。

そこで今回は、PC表示でもハンバーガーメニューにカスタマイズする方法をご紹介します。下記のような画面になります。

ちなみにハンバーガーメニューを開くと、下記のような形になります。

今回のカスタマイズでは、極力コードを簡単にするためにヘッダー設定を固定させていただきます。下記の設定にすることで、正常に動作します。

• ヘッダーレイアウト（PC） = ヘッダーナビをロゴの横に（右寄せ）
• ヘッダーのレイアウト（SP） = ロゴ左/メニュー右
• ヘッダーの追従 = PCはなし、SPはどちらでもOK
• 検索ボタンの表示位置： = 両方とも「表示しない」（ハンバーガーメニュー内に検索バーを入れます）

カスタマイズ自体はCSSのみで割と簡単にできますので、ぜひお試しください。