Hi Andrew
Thanks for your earlier help with a transparent menu bar question (Reply #11170). It’s working great.
My next question is how to change the logo in the sticky header when the user scrolls down. Please see this website here to see what I mean. They have a reverse logo at first and then a full color in the smaller header on scroll.
Is this possible to do in Ultra?
Thanks, Karen
Hi Karen
You can install Code Snippets plugin and add a new snippet, name it as you’d like, in the snippet body add:
if ( ! function_exists( 'ultra_sticky_logo' ) ) :
function ultra_sticky_logo( $html ) {
$html = preg_replace('/<img(.*?)\/>/', '<img class="alt-logo" style="max-width: 75px;" src="http://localhost/ultra/wp-content/uploads/2018/03/pennant-1.jpg" alt="logo" /><img class="alt-logo-scroll" style="max-width: 75px;" src="http://localhost/ultra/wp-content/uploads/2018/03/logo-1.jpg" alt="logo" />', $html );
return $html;
}
endif;
add_filter( 'get_custom_logo', 'ultra_sticky_logo' );Both image URL’s have to be replaced with your two images. You can also adjust the two max-height values as required.
Set the function to run on the site front end only, save and activate. Then add to Customize > Additional CSS:
.site-header .site-branding .alt-logo-scroll {
display: none;
}
.is-stuck.site-header .site-branding .alt-logo {
display: block;
}This customization requires that you first add your logo to Customize > Site Identity and not Theme Settings > Header.
This is more of a premium support question. Hope the above helps.
Hi Andrew,
I really appreciate the reply, esp. as it’s more of a premium support question. Thanks so much. I’ll give this a try.
Karen
For sure 🙂