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

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

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

takato(@n8takato)です!

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の子テーマを設定する方法を知りたい この記事は上記の課題に向けて作成しています。 WordPressでweb制作をしているとLightningのテーマを頻繁に使用します。 ...

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

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

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

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

最後に

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

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

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

  • URLをコピーしました!
目次