Mobile header - different logo with sticky enabled

Hi Michael,

You can add a Sticky nav logo through Appearance > Customize > Layout > Sticky Navigation. Reference: https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-logo

It's already added in that location as it works with sticky on desktop. It's not displaying on mobile though that's why I thought there must have been another setting?

I see. Do you have the Mobile Header turned on? If so, can you try turning it off to test?

Yes, it was on.

I have turned off now to test. It works with it off but I need the mobile header on.

I see. If that's the case, create a Hook Element, and add this code:

<?php
$my_url = 'https://www.google.com';
		$logo_src = 'https://fazarcon.pluginsupportwp.com/wp-content/uploads/2022/07/55f76703-39f3-3fea-977a-8bfdbd5fcb4d.jpg';
		$width = '150px';
		$height = '150px';
		echo sprintf(
				'<div class="sticky-navigation-logo header-2">
					<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
			);
?>

Make sure to enable "Execute PHP". Hook it to generate_inside_mobile_header.

Then, add this CSS through Appearance > Customize > Additional CSS:

nav#mobile-header.is_stuck .site-logo.mobile-header-logo {
    display:none;
}

Let us know how it goes.

Thanks, that is working now. Just need to adjust with css as the sticky logo is hard left and top. Needs some padding.

You're welcome, Michael! Let us know if you'll also need help with the CSS, and we'll do our best to assist you.