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

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

このトピックには2件の返信が含まれ、2人の参加者がいます。9 ヶ月前 yunahana さんが最後の更新を行いました。

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

    kurudrive
    キーマスター

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

    .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件中)

このトピックに返信するにはログインが必要です。