WordPressの無料テーマ「Lightning」を使用している方に宛てた記事です。
ハンバーガーボタンの編集をしたい時に活用して欲しいです。
おすすめの方法
ハンバーガーボタンの位置を調整する前に、実際のサイト表示を確認する画面の上部にある、黒いバーを非表示にしておくことをお勧めします。
私はこれを表示させたまま編集を行なっていたことで、違うCSSのクラスのところを一生懸命いじって「表示が全然変わらない（ ; ; ）」っていう事態になっておりました。
非表示の方法は別の記事でご紹介しているので、ご参照ください！
位置調整のためのCSS
位置調整に関しては下記のように書きます。
うまく動かない場合は、クラスを検証ツールでご確認ください！
.vk-mobile-nav-menu-btn {
background: var(--vk-mobile-nav-menu-btn-bg-src) center 50% no-repeat rgb(166 185 200);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
top: 18px;
left: 15px;
}解説
background: var(–vk-mobile-nav-menu-btn-bg-src) center 50% no-repeat rgb(166 185 200);
背景の調整です
薄水色に調整しております。
border: none;
テーマデフォルトのCSSに、ボーターが入っているので、消しました。
border-radius: 50%;
ハンバーガーボタンは真ん丸したかったので、50％
width: 50px; height: 50px;
ロゴの大きさが高さ50px だったので、それの大きさに合わせました。
top: 18px; left: 15px;
ハンバーガーボタンは、「position: fixed」で固定されるようになっています。
「position: fixed」は、基準値が画面全体です。
「position: fixed」の位置の考え方
一番左端にしたい時は、top: 0; left: 0;
一番右端にしたい時は、top: 0; right: 0;
という考え方です。
top: 18px;
一番上に固定したいので、基本は top: 0;
ヘッダーの上の余白が「18px」だったので、上の位置を調整しました。
left: 15px;
今回は、画面上左端に固定したいので、基本は left: 0;
ヘッダーの左右の余白が「15px」だったので、左の位置を同じ大きさにしました。
ロゴを差し替えた場合の考え方
ロゴを差し替えた場合、上記の書き方だとうまく位置が調整できないと思います。
ロゴの位置と同じ高さに、ハンバーガーボタンを設置したい場合は、top の位置を下記のように調整します。
top を「ロゴの上 padding + ロゴの高さ/2 – ボタンの高さ/2」で調整
例）ハンバーガーボタンを左上に固定させたい
・上の余白が18px
・ロゴの高さが50px（50px / 2 = 25px）
・ハンバーガーボタンの高さ40px （40px / 2 = 20px）
・ヘッダーの左右の余白が15px
.vk-mobile-nav-menu-btn {
width: 40px;
height: 40px;
top: calc(18px + 25px - 20px);
left: 15px;
}こうなるわけです。
※ calc() は 演算子の前後に必ずスペースが必要 です。
まとめ
今回はハンバーガーボタンの位置について説明しました。
ハンバーガーボタンや他の要素の位置調整に使える、transform: translateY(-50%)の考え方や、position: absoluteの考え方など、詳しく解説した記事もあるので、気になる方はご参照ください！
これを元にアレンジしてみてくだされば嬉しいです！
