「Lightning」のハンバーガーメニューのデザインをオリジナルデザインに変更する方法

ハンバーガーメニューのデザインをオリジナルデザインに変更する方法

Lightningのハンバーガーメニューのデザインとは

ハンバーガーメニューというのは、スマホの表示の時などに左上や右上にある三本線のアイコンです。タップ（クリック）すると、メニューリストが現れたりします。

Lightningの場合、表示しているホームページの横幅が、992px以下になったら、自動的に通常の横並びのメニューから、ハンバーガーメニューに切り替わるようになっています。

左上に表示され、デザインは下のように四角い枠の中に三本線というデザインになっております。

Lightningのハンバーガーメニューのデザイン

こちらのハンバーガーメニューをオリジナルデザインに変更したいと思います。

ハンバーガーメニューのデザイン画像を用意する

ハンバーガーメニューのデザインは何でもいいのですが、今回はシンプルに三本線とその下にMENUと書かれた画像とタップ時の×の画像の2枚を用意しました。

humb.png
humb-open.png

次にダッシュボード「メディア」＞「新規追加」で2枚の画像をアップロードします。

アップロードしたら、この2枚の画像のファイルURLをどこかにメモしておいてください。ファイルURLは、「メディア」＞「ライブラリ」でその画像をクリックすれば調べることができます。

「ファイルのURL：」に書かれていて、「URLをクリップボードにコピー」で、コピーできますので、メモ帳にでも貼り付けておきます。

CSSの追加

今度は追加CSSで、ハンバーガーメニューの見た目を変えるように指定します。

ダッシュボード「外観」＞「カスタマイズ」から、追加CSSをクリックして、以下のコードを記述します。

.vk-mobile-nav-menu-btn {
    border: none;
    background-image: url("ここにhumb.pngのファイルURLを書く");
	  background-size: cover;
}
.vk-mobile-nav-menu-btn.menu-open {
    border: none;
    background-image: url("ここにhumb-open.pngのファイルURLを書く");
	  background-size: cover;
}

.vk-mobile-nav-menu-btn　の　background-image: url()　の括弧の中に先ほどメモした三本線のファイルURLを記述、.vk-mobile-nav-menu-btn.menu-open　の　background-image: url()　の括弧の中にこちらも×のファイルURLを記述してください。

これで従来のLightningのハンバーガーメニューが、アップロードした画像に置き換えられます。

ハンバーガーメニューの位置を左上から右上に変える

Lightningのハンバーガーメニューの位置は画面の左上なのですが、どちらかというと右上にある方が主流のように思います。

そこで、ついでにハンバーガーメニューの位置を左上から右上に変更したいと思います。

.vk-mobile-nav-menu-btn {
	 right:5px;
	 left:inherit;
}

こちらのCSSを追加するとハンバーガーメニューの位置を右上に変更できます。

PAGE TOP