[Resolved] Sticky Navigation for custom category logo not displaying in tablet or desktop

[Michelle]

I added php into snippets, and also a site header into elements. What can I add to this to make the new custom logo sticky on tablet and mobile?

In elements, I uploaded to the site header (no merge) and set locations for my category archive, category page, and category post.

In snippets, I added this php:

/*Replace site logo with custom logo for category archive XYZ*/
add_filter( ‘generate_logo’, function( $logo ) {
// Return our category logo URL
if ( i-added-my-category-archive-page-id-here === get_the_ID()) {
return ‘https://cdn.i-put-my-site-logo-url-here.svg‘;
}

// Otherwise, return our default logo
return $logo;
} );

add_filter( ‘generate_retina_logo’, function( $logo ) {
// Return our category logo URL
if (i-put-the same-category-id-of-my-logo-here-as-i-added-in-the-above-code === get_the_ID()) {
return https://cdn.i-put-my-site-logo-url-here.svg;
}

// Otherwise, return our default logo
return $logo;
} );

[Ying]

Hi there,

What can I add to this to make the new custom logo sticky on tablet and mobile?

It seems the logo is sticky on tablet and mobile:
https://www.screencast.com/t/rRyuUlXL

[Michelle]

I meant to say on “desktop”, sorry, Ying

[Fernando]

Hi Michelle,

To clarify, are you referring to altering the Stick Nav Logo for a specific page as well?

Can you try adding this PHP:

add_filter('generate_sticky_navigation_logo_output',function($output, $img_src, $image){
	if( 1431 === get_the_ID() ){
		$my_url = 'https://www.google.com';
		$logo_src = 'https://cdn.reachingmyworld.com/wp-content/uploads/2022/06/18162522/Daily-Reach-Logo-For-Site.png';
		$width = '150px';
		$height = '150px';
		return sprintf(
				'<div class="sticky-navigation-logo">
					<a href="%1$s" title="%2$s" rel="home">
						<img src="%3$s" class="is-logo-image" alt="%2$s" width="%4$s" height="%5$s" />
					</a>
				</div>',
				$my_url,
				get_bloginfo( 'name', 'display' ),
				$logo_src,
				$width,
				$height
			);
	}
	return $output;
}, 10, 3);

Kindly replace 1431 with your page ID, https://www.google.com with the new URL, and https://cdn.reachingmyworld.com/wp-content/uploads/2022/06/18162522/Daily-Reach-Logo-For-Site.png with your image source.

Kindly let us know how it goes. If you’re referring to something else, kindly let us know as well.

[Michelle]

Your code worked great for making that certain page have a sticky logo on mobile. How can I make the logo sticky on desktop for that specific page?

[Fernando]

That code should work for desktop as well. Can you link us to the specific page again? I’ll check if I can see why it’s not working.

[Michelle]

I was able to get it to work (I was missing a bit of code from copying it incompletely, but still need a minor adjustment: on scroll, there is a gap between the header and the top of the custom page where I’ve disabled the top bar. I’m assuming it is a space left from where the top bar and header are both sticky together on the rest of the site.)

[Fernando]

You have this custom code in Additional CSS:

nav#mobile-header.is_stuck {
    margin-top: 39px !important;
}

You’ll need to modify it to something like this to exclude it for this specific page:

body:not(.page-id-6619) nav#mobile-header.is_stuck {
    margin-top: 39px !important;
}

Hope this helps!

[Michelle]

It remains the same, sorry. Wait–you said “modify the code”, not “add this new code”…one moment…

Yes! That did work (of course it did).

[Fernando]

To clarify, are you referring to replacing the logos for posts in that specific category or are you referring to the top bar issue?

Can you share an exact link to a post?

[Michelle]

A post example:

https://www.reachingmyworld.com/blog/2022/07/19/reading-emotions/

I have a bigger problem now though…my custom page is blank on the frontend…

[Fernando]

I responded to your other thread.

For this one, one option we can do is to add the code through a Hook Element instead so we can exclude specific posts/pages.

You can try adding this through a Hook Element:

<style>
nav#mobile-header.is_stuck {
    margin-top: 39px !important;
}
</style>

Hook it to wp_head and set the display rules according to your preference – where you’re showing the top bar.

[Author]

Posts