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;
}
}
/* 
 * ヘッダーロゴのセンターカスタム 
 * はここ迄
 */
Visited 1 times, 1 visit(s) today
よかったらシェアしてね!
  • URLをコピーしました!
目次