こちらのフォーラムのようにスクロールするとロゴを小さくしたい

[yunahana]

いつも大変お世話になっております。

LightningProのCharmをつかっています。
ナビがテキストなので、スクロールすると少し寂しい感じがしたので、下記の設定をして、ロゴを固定しました。
でも、画面が狭くなってしまうので、こちらのフォーラムのように、スクロールするとロゴがシュッと小さくなるようにしたいと思うのですが、可能でしょうか？
ご教授いただけますと助かります。
どうぞよろしくお願いいたします。

—————————————————————-
子テーマの functions.php などに

// ヘッダー固定用のclassを追加
add_filter( ‘body_class’, ‘my_body_class_add_headfix’ );
function my_body_class_add_headfix( $class ) {
$class[] = ‘headfix’;
return $class;
}
子テーマの style.css などに

@media (min-width: 992px){
body.header_scrolled .gMenu_outer,
body.header_scrolled.admin-bar .gMenu_outer {
top:inherit;
}
body.header_scrolled .navbar-header {
margin-bottom: 0;
}
}
@media (max-width: 991px){
body.admin-bar .siteHeader {
padding-top: 0;
}
}

[石川＠Vektor,Inc.]

概ねこんな感じではないかと思います。

.siteHeader_logo{
	line-height: 50px;
}
.siteHeader_logo img {
	height: 50px;
	transition: height 0.5s 0s ease-out;
}
.scrolled .siteHeader_logo {
	line-height: 0;
}
.scrolled .siteHeader_logo img {
	height:30px;
}

[yunahana]

kurudrive 様

お世話になっております。
いつも適切なご教授、ありがとうございます！

ばっちりでした♪
丸いロゴが、小さくなったり元に戻る動きがとってもかわいくて、何度もスクロールしてしまいます(笑)

本当にありがとうございましたm(_ _)m

[投稿者]

投稿