- This topic has 3 replies, 2 voices, and was last updated 5 years, 10 months ago by
.
- Posts
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
You must be logged in to reply to this topic.