Shrink Logo on scroll


#1

I would like to shrink the entire header on scroll. What is the best way to do this in Talon Pro?
I have made an attempt below however the menu and the logo do not shrink, only the header. Please help, thanks.

I have added the following code in the CSS:

.mobile-branding {
    background-color: #fff;
}
#header .main-header {
    box-shadow: none;
}
.logo {image-rendering: optimizeQuality;
}
header.shrink {
  height:80px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.author {
	display: none;
}

And I have added the following code as a PHP Code Snippet:

add_action ('wp_footer','vr_shrink_head',1);
function vr_shrink_head() {
?>

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) { 
            $('header').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        }
    });
});
</script>

<?php 
}

#2

Hello,

Can you please provide a link to your website?

Kind Regards, Roman.


#3

Website: https://www.steadiware.com

I don’t think the Menu items really need to shrink, although this would make a full solution. But the logo does need to shrink somehow. Thanks.


#4

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

#header-sticky-wrapper.is-sticky img.custom-logo {
    max-height: 60px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#5

This one line fixed everything! Thank you so much :slight_smile:


#6

Great! You are welcome :slight_smile:

Kind Regards, Roman.


closed #7