【SWELL】スマホのグロナビ(ハンバーガーメニュー)をPCでも表示させるカスタマイズ

※2023年6月3日追記
SWELL最新バージョン（2.7.5.1）でも有効です。

SWELLマニアの、かんた（@swell_mania）です。

本記事ではスマホサイトに表示される「ハンバーガーメニューを、PCサイトでも表示させる」作業メモをシェアします。

↓以下、今回のカスタマイズを実装したデモサイトです。

デモサイト

「ハンバーガーメニュー」はページの上部に表示される以下のパーツのことです。クリックするとメニューが開くタイプで、スマホだとよく見かけますよね？

SWELLだとスマホサイト限定のメニューとしてはあるんですが。PCサイトに表示させることはできません。

デモサイトは運用面を考慮し、テーマファイルを一切編集せずにハンバーガーメニューを表示するカスタマイズをしてみました。

もちろんプラグインも使いません。

ヘッダーの追従にも対応しています。

＜今回のカスタマイズ構成＞

・SWELL： 2.7.5.1（執筆時の最新バージョン）
・プラグイン：なし
・テーマファイルの編集：なし
・ヘッダーのレイアウト(PC)：ヘッダーナビをロゴの横に（右寄せ）