Add Padding For Custom Category Header

Hi Michelle,

To clarify, did you use a Block Element - Site Header? Or, are you referring to a Header Element?

Moreover, the credentials provided aren’t working.

Lastly, what exactly is occurring on mobile? Can you take a screenshot? And, how should it look like?

Sorry about the credentials. I must have had a typo. I used a Site Header to replace the logo, and this hook element in wp_head:

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

I also used this Snippet:

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

add_filter('generate_sticky_navigation_logo_output',function($output, $img_src, $image){
	if( 6619 === get_the_ID() ){
		$my_url = 'https://www.page url where I want the new logo';
		$logo_src = 'https://image url of my category logo.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" 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);

The category logo sits full width, yet needs to be contained.
The navigation items fall into a hamburger menu instead of staying next to the logo. I disabled all menu items except for a Login/Logout link, so fitting it on the header should be easy.
I don't know how to upload a screenshot here, or I'd send one.

Are you referring to the Header Element you have for this page?

If so, you don’t have a Top and Bottom Padding set in the Header Element’s page hero section yet.

If you're referring the site-header, not the Header Element, can you try adding the padding in Customize > Layout > Header? Or do you just want to add padding specific to this page?

Let us know.

I can't use the Customizer because it is what sets my main logo. This is a category logo.

I don't know if the Header Element, site header, or snippet controls the logo on the left and nav on the right. All three were attempts I made over the past week to try and make things work. I am so discouraged.

I see. You can try this CSS:

body.page-id-6619 .inside-header.grid-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

Or this if you want to alter top, right, bottom, and left paddings:

body.page-id-6619 .inside-header.grid-container {
    padding: 40px 20px 40px 20px;
}