[Support request] On MOBILE: Make custom category larger so it looks like sticky scroll

[Michelle]

On mobile, I want to make my custom category logo larger so it looks like the size of the logo on sticky scroll. I can’t use the customizer since it controls my main site logo. I don’t know CSS yet.

[David]

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.

[Michelle]

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);

[Fernando]

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;
}

[Author]

Posts