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

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

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

  • このトピックには2件の返信、2人の参加者があり、最後にyunahanaにより5年、 1ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #14898

    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;
    }
    }

    #14906

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

    .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;
    }
    #14908

    yunahana
    参加者

    kurudrive 様

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

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

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

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。