Lightning G3(無料版)のロゴとヘッダーメニューを縦に並べて中央揃えにする【備忘録】

Lightning G3(無料版)のロゴとヘッダーメニューを縦に並べて中央揃えにする方法

Lightning G3(無料版)の子テーマを有効化して、WordPress管理画面内の、外観 > カスタマイズ > 追加CSS に次のCSSを追加しました。
ググって調べても上手くいかなかったので、我流です。コピペして、適宜書き換えてお使いください。

/* 
 * ロゴとヘッダーメニューを縦に並べて中央に配置する 
 * ここから
 */

/* ロゴとヘッダーメニューを上下に */
div#site-header-container {
	display: block;
}

/* モバイル用 */
@media (max-width: 991.98px) {
/* ロゴ画像の大きさを調整 */
.site-header--layout--nav-float .site-header-logo img {
	max-height: 70px;
	}
}

/* パソコン用 */
@media (min-width: 992px) {
/* ヘッダーメニューをセンターに */
.global-nav--layout--float-right .global-nav-list {
	margin: 0 auto 20px;
	}
/* ロゴをセンターに */
.site-header--layout--nav-float .site-header-logo a {
	margin: 0 auto;
	}
/* ロゴ画像の大きさを調整 */
.site-header--layout--nav-float .site-header-logo img {
	width: 450px;
	max-height: 100%;
	}
}

/* 
 * ロゴとヘッダーメニューを縦に並べて中央に配置する 
 * ここまで
 */

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です