On MOBILE: Make custom category larger so it looks like sticky scroll

Hi there,

you can use some CSS to resize the mobile header logo like so:

#mobile-header .site-logo.mobile-header-logo img {
    height: 65px;
}

however that will apply to all the mobile header logos.

So how is that logo added? Is it just for that specific page ? As we need to make the CSS specific to those.

Yes, the logo is added through Elements and snippets for one category and one page. I'd also like it to work on that Category's post pages (Single) and for that Category's archive. Here's what I have:

Elements: generate_inside_mobile_header

<style>
nav#mobile-header.is_stuck {
    margin-top: 39px !important;
	padding-left:  30px;
	padding-right: 20px;
		padding-top:  15px;
	padding-bottom: 8px;
}
</style>

Also: Elements Header

I uploaded my category logo with "No Merge"
Container: Contained
Inner Container: Contained

Snippet:

/*Replace site logo with category logo for page id 6619*/

add_filter('generate_sticky_navigation_logo_output',function($output, $img_src, $image){
	if( 6619 === get_the_ID() ){
		$my_url = 'https://www.reachingmyworld.com/i-put-my-page-url-here';
		$logo_src = 'https://i-put-my-logo-url-here.svg';
		$width = '150px';
		$height = '150px';
		return sprintf(
				'<div class="sticky-navigation-logo">
					<a href="%1$s" title="%2$s" rel="home">
						<img src="%3$s" 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);

Hi Sascha,

You can add David’s code to your Hook Element.

Or this if you want to add it through Additional CSS:

.page-id-6619 #mobile-header .site-logo.mobile-header-logo img {
        height: 70px;
}