Menu layout shift on page load

Just to complement the information, besides CSS changes, I am using this function below.

add_filter( 'generate_navigation_search_output', function () {
	printf(
		'<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Buscar ..."  class="search-field" value="%2$s" name="s" title="%3$s" />
            <input type="submit" class="search-button" value="">
        </form>',
		esc_url( home_url( '/' ) ),
		esc_attr( get_search_query() ),
		esc_attr_x( 'Search', 'label', 'generatepress' )
	);
} );

It seems something related to the search icon loading first below the hamburger menu and then going to the right place.

Hi,

Can you try disabling the cache first and see if it still occurs?

Let us know.

This observation was very interesting. I thought it couldn't be related to the cache but by disabling the cache for mobile devices the problem was fixed. I believe you have to contact WP-Rocket support to find out how to resolve this.

Hi there,

the issue will be related to the cache plugins settings. WP Rocket provide this Troubleshooting guide to help find which of their settings is causing the problem:

https://docs.wp-rocket.me/article/106-my-site-is-broken

Hi David,

I disabled all the features from WP-Rocket and enabled them one by one until I discovered that it was the Image Lazyload that was causing this problem. So following the tutorial, I added a new function that seems to have corrected it.

function rocket_lazyload_exclude_class( $attributes ) {
	$attributes[] = 'class="is-logo-image"';

	return $attributes;
}
add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );

Thanks

Glad to hear that!