Shrink Logo on scroll

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 {
  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() {

jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) { 



Can you please provide a link to your website?

Kind Regards, Roman.


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.

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section. img.custom-logo {
    max-height: 60px;

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

Kind Regards, Roman.

1 Like

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

Great! You are welcome :slight_smile:

Kind Regards, Roman.