Lightning G3 無料版でスクロール時にヘッダーロゴ画像を表示するには

カスタマイズにより、スクロールしたときにヘッダーロゴ画像を左に表示する

バランスを考えて、グローバルナビを右寄せにします。

以下の CSS を追加します。

@media (min-width: 992px) {

.header_scrolled .site-header-logo {
    display: block;
    position: absolute;
    padding-top: 10px;
}

.site-header--layout--nav-float .site-header-logo {
    margin-right: 0;
    width: auto;
}

.header_scrolled .site-header-logo img {
    width: auto;
    height: 40px;
}

.header_scrolled .site-header .global-nav {
    margin-right: 0;
}

}

グローバルナビが中央寄せのままの方がお好みであれば、最後の margin-right: 0; を削除すればいいです。そうする場合は、念のために 画面幅 992px でヘッダーロゴ画像とグローバルナビが重ならないことを確認しましょう。

PAGE TOP