[Support request] Mobile header – different logo with sticky enabled

[Michael]

Hi, using the mobile header with sticky enabled.

where is the the option to use a different logo on ‘sticky’ compared to standard?

Thanks

[Fernando]

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

[Michael]

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?

[Fernando]

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

[Michael]

Yes, it was on.

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

[Fernando]

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.

[Michael]

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

[Fernando]

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.

[Author]

Posts