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
}
