Lightningのハンバーガーメニューの位置を変更したい
この記事では上記の課題を解決します。
WordPressでwebサイトを制作する際、Lightningのテーマを使用する方が多いと思います。
その際、デザインの都合上ハンバーガーメニューの位置を変更する場合があります。
そこで今回は、Lightningのハンバーガーメニューの位置を変更する方法を紹介します。
この記事でわかること
- Lightningのハンバーガーメニューの位置を変更する方法
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
Lightningのハンバーガーメニューの位置を変更
Lightningのハンバーガーメニューの位置を変更する方法を紹介します。
デフォルトでは左側に位置している
Lightningのハンバーガーメニューはデフォルトでは左側に位置しています。
それを右側に変更していきます。
ハンバーガーメニューを右側にする方法
Lightningのハンバーガーメニューを右側に表示するには、下記のコードを追加する必要があります。
.vk-mobile-nav-menu-btn {
left: initial;
right: 5px;
}少し説明します。
left: initial;こちらのコードで、メニューの左配置をキャンセルします。
「initial」は、既に記入されているcssを無効化することが出来るコードです。
right: 5px;無効化した上で上記のコードを追加することで、メニューの位置を右にすることが出来ます。
「5px」にしているのは、右端に対して余白を作るためです。
上記のコードをLightningのスタイルシートに記入すると、メニューの位置が右側に移動します。
子テーマのスタイルシートに記入
Lightningのスタイルシートにコードを記入する際、親テーマではなく子テーマに記入するようにしましょう。
親テーマのスタイルシートに記入すると、テーマ更新時にコードが上書きされてしまいます。
それを防ぐために、子テーマのスタイルシートに記入するようにしましょう。
Lightningの子テーマの導入方法については、他の記事で紹介しています。
詳しくは「Lightningの子テーマを設定する簡単な方法をわかりやすく紹介！」を読んでください。
ハンバーガーメニューをデザインする方法
Lightningのハンバーガーメニューを他のデザインに変更することが可能です。
ハンバーガーメニューのデザイン変更は比較的簡単に行うことが出来ます。
詳しい内容は他の記事で紹介しています。「Lightningのハンバーガーメニューをカスタマイズする方法！」の記事を読んでください。
最後に
この記事ではLightningのハンバーガーメニューの位置を変更する方法を紹介しました。
デザインの都合上、どうしてもメニューの位置を変更したいという場合があります。
その時に柔軟に変更できるように、覚えておいてください。