Lightningのヘッダーロゴの中央化【簡単コピペ】

Lightningのヘッダーロゴの中央化、ヘッダーロゴ・メニューの上下設定

不具合・センターのズレ無し、何とこれだけ！！！

/* 
 * ヘッダーロゴのセンターカスタム 
 * はここから下
 */

/* サイトロゴとヘッダーナビを縦に */
div#site-header-container {
   display: block;
 }

/* ヘッダーメニューをセンターに */
.global-nav--layout--float-right {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ヘッダーロゴをセンターに */
.site-header--layout--nav-float .site-header-logo {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
	
}
@media (min-width: 992px) {
/* メニューをセンターに */
body:not(.header_scrolled) .global-nav--layout--float-right {
    display: flex;
    justify-content: center;
    align-items: center;
}
.global-nav--layout--float-right .global-nav-list {
    margin: 0 auto;
}
/* ヘッダーロゴをセンターに */
.site-header--layout--nav-float .site-header-logo img {
    margin-left: 0;
    margin: 0 auto;
}
}
/* 
 * ヘッダーロゴのセンターカスタム 
 * はここ迄
 */

監修者 編集者

四方田修治 Web制作・WordPress構築 / 生成AI活用・SNS自動化 / SEO・LLMO・広告運用

Webデザイン・WordPressの構築／カスタマイズを中心に、HTML・CSS・PHPを用いたWebサイト制作に対応しています。表示速度の改善、SEO・LLMO、広告運用に加え、生成AIの活用やSNS運用の自動化についてもご相談いただけます。

YomoWebb.Designでは、制作実績、WordPressの使い方、生成AIの活用方法やツール選びなどを紹介しています。Web制作・サイト運用に役立てられるよう、専門的な内容を分かりやすくお伝えします。

𝕏 @ f