Lightningのハンバーガーメニューの位置を変更する方法を紹介!

Lightningのハンバーガーメニューの位置を変更する方法を紹介!

takato(@n8takato)です!

Lightningのハンバーガーメニューの位置を変更したい

この記事では上記の課題を解決します。

WordPressでwebサイトを制作する際、Lightningのテーマを使用する方が多いと思います。

その際、デザインの都合上ハンバーガーメニューの位置を変更する場合があります。

そこで今回は、Lightningのハンバーガーメニューの位置を変更する方法を紹介します。

この記事でわかること

  • Lightningのハンバーガーメニューの位置を変更する方法

この記事を書いた人

  • 26歳
  • 男性
  • 都内制作会社に勤めるwebデザイナー
  • 法人営業職→未経験で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の子テーマを導入したい この記事では上記の課題を解決します。 WordPressでweb制作をしていると、Lightningのテーマを頻繁に使用します。 その際Lightningの...

ハンバーガーメニューをデザインする方法

Lightningのハンバーガーメニューを他のデザインに変更することが可能です。
ハンバーガーメニューのデザイン変更は比較的簡単に行うことが出来ます。

詳しい内容は他の記事で紹介しています。「Lightningのハンバーガーメニューをカスタマイズする方法!」の記事を読んでください。

あわせて読みたい
Lightningのハンバーガーメニューをカスタマイズする方法! Lightningテーマのハンバーガーメニューをカスタマイズしたい この記事では上記の課題を解決します。 WordPressで企業サイトを作成する際、Lightningは非常によく使われ...

最後に

この記事ではLightningのハンバーガーメニューの位置を変更する方法を紹介しました。

デザインの都合上、どうしてもメニューの位置を変更したいという場合があります。

その時に柔軟に変更できるように、覚えておいてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる