SVG Logo Height and Width causing CLS issue

Hi there,

There are multiple ways to increase the height of your site navigation.

One way is to increase the size of the logo in Appearance > Customize > Site Identity (Logo width). https://share.getcloudapp.com/OAuPx05q

The site navigation should increase in size along with it to make it fit inside it.

Another way is to increase the menu item height of your primary navigation on Appearance > Customize > Layout > Primary Navigation. https://share.getcloudapp.com/Jru4wPrE
Same principle with increasing the size of the logo.

One more way of doing this is through custom CSS.

Example #1: by adding padding

nav#site-navigation {
    padding: 15px ;
}

Example #2: By setting the min-height of the inner container

nav#site-navigation .inside-navigation.grid-container {
    min-height:100px;
}

I am using the SVG logo and as per pagespeed insight, it is showing to add width and height. Before my site logo was placed left-hand side and after adding this code.

add_filter( 'generate_logo_output', 'tu_logo_attributes', 10, 3 );
function tu_logo_attributes( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img width="235" height="100" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
	);
}

It moved to the right stick with the menu. I have added my site URL under Private information kindly check.

Hi there,

try adding this CSS to correct the position:

.site-logo {
  margin-right: auto;
}
.site-logo img {
  vertical-align: bottom;
}
@media(max-width: 768px) {
  .site-logo {
    margin-left: 10px;
  }
}

Thanks, x 100, it worked! Great support as always.

Glad to hear that!