Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 20, 2020 at 9:32 am #1231659
    Vangone

    Hello,

    I want to change the size of the Logo when scrolling down.

    I am using transparent header. But not the shrinking funktion.

    In my CSS I already changed the Style of the header as followed:

    #header_main .logo{
	padding-top:5px!important;
	padding-bottom:5px!important;

}

#header_main .inner-container{
	padding-top:20px!important;
	padding-bottom:50px!important;

}

#header_main .inner-container .logo{
height:200px!important;

}
#top #header #header_main .container.av-logo-container {
 padding:50;
}

#top #header .container {
    width: 100%;
    max-width: 100%;
}

    But no I need to change these Settings again, when the side is scrolled down and the Transparent Header is visible. So the Logo fits perfect to it.

    Thanks for your help

    July 23, 2020 at 6:38 am #1232491
    Nikko

    Hey Vangone,

    We apologize for the delayed response.
    For this type of tweak you will first need a child theme.
    (skip this if you already have one), you can download and find instructions for the child theme in our documentation: https://kriesi.at/documentation/enfold/child-theme/
    Next in the child theme’s functions.php, add this code:

    function reduce_logo_height(){
    ?>
    <script>
        (function( $ ) {
			var $logo = $('#header .logo img');
            var $height = $logo.height();
			var $newHeight = $height * 0.5;
            
            $(window).scroll(function() {
			if ( $(this).scrollTop() > 200 ) {
				$logo.height($height);
				console.log($height);
			 } else	{
			  $logo.height($newHeight);
				 console.log($newHeight);
			 }
		 });
            
        }(jQuery));
    </script>
    <?php
}
add_action('wp_footer', 'reduce_logo_height', 90);

    Then in Quick CSS, please add:

    #header .logo img {
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

    Best regards,
    Nikko

    July 23, 2020 at 7:01 am #1232496
    Guenni007

    Or – you use an own child-theme shrinking script : avia-snippet-sticky-header.js
    put the copy to your child-theme/js folder ( on default there will be no one – then create that subfolder in your child-theme folder )

    Edit that child-theme copy by commenting out that following line ( on actual 4.7.5 enfold it is line 91) so that there is:

    
//elements.css({'height': newH + 'px', 'lineHeight': newH + 'px'});

    load the child-theme script by deregister the parent-theme file and load the new one:
    (this to functions.php of your child-theme:)

    add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 );
function wp_change_sticky_header_script() {
   wp_deregister_script( 'avia-sticky-header' );
   wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true);
}

    and use the shrinking header option then on Enfold Options. – Now only the logo will shrink on scroll –
    Everything is like on a shrinking header – except the header height will not be changed .

    July 23, 2020 at 8:05 am #1232501
    Nikko

    Hi Guenni007,

    Thanks for helping out :)

    Best regards,
    Nikko

    July 23, 2020 at 10:27 am #1232547
    Vangone

    Hello and Thanks for helping out.

    I did it, as Nikko said.
    But now it is working exactly the Wrong way.

    When I scroll, the Logo becomes big, and at the Top Level, It is small.

    Regards,
    Phil

    July 23, 2020 at 10:48 am #1232551
    Nikko

    Hi Phil,

    I apologize for my mistake, please replace it with this code instead:

    function reduce_logo_height(){
    ?>
    <script>
        (function( $ ) {
            var $logo = $('#header .logo img');
            var $height = $logo.height();
            var $newHeight = $height * 0.5;
            
            $(window).scroll(function() {
		if ( $(this).scrollTop() > 200 ) {
		    $logo.height($newHeight);
		} else	{
		    $logo.height($height);
		}
            });
            
        }(jQuery));
    </script>
    <?php
}
add_action('wp_footer', 'reduce_logo_height', 90);

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.