[Resolved] SVG Logo Height and Width causing CLS issue

[Milind]

Hello there, I need help.

I was getting SVG CLS issue on my blog. I google searched about the issue and found generatepress support forum – https://generatepress.com/forums/topic/svg-causing-cls-movement/page/2/. In this discussion, “Elvin” provided a code to fix SVG causing CLS movement issue.

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

After adding this code, the problem is solved. But the problem is my site navigation was shrunk off. How to fix this?? Please help.

[Elvin]

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

[Milind]

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.

[David]

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

[Milind]

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

[David]

Glad to hear that!

[Author]

Posts