Logo jumping around when navigating

Hi. Please, let us know the browser, browser version and operating system so we can try to recreate the issue. Thanks.

Sorry, I do see the issue. Perhaps try adding the following to Customize > Additional CSS or your choice of Custom CSS or child theme style.css location:

#masthead.masthead-logo-in-menu .logo {
    min-width: 175px;
}

Does that help?

Hi Andrew,

As you can see, it is better now with the addition of your min-width css. However the logo still briefly disappears or “reloads” on each page navigation, which is far from ideal.

Im using
Windows 10 14393.1593 which is the latest stable build I believe
Chrome Version 61.0.3163.100 (Official Build) (64-bit) which again is latest stable if Im not misstaken.

Any further ideas?

Thanks for the feedback. I see the issue. I’ve asked Alex to take a look for us too when he’s able. We’re a little on/off at the weekend so please, hang in there, we’ll reply ASAP. I’m sure we can get to the bottom of the flashing logo issue. Sorry for the hassle.

One idea is that the srcset is causing the logo image flash. Do you have a Retina logo added? If so, please, can you try removing it.

I removed the Retina logo and it seems nothing has changed – logo is still flashing. I dont know what srcset is.

Please, try removing the normal logo in Theme Settings and then adding your logo via Customize > Site Identity. Any change?

I found the culprit I think.

I have this code snippet below running to rewrite long media slugs. I removed it for now, but the logo still hops a couple pixels ??

Via customize site identity the logo height isnt constrained and the resulting render is incorrectly sized.

Maybe you can help me find the conflict with my media slug code?

function detect_image($request) {
	global $wp, $wpdb;
	
	// Allowed MIME types
	$mime_types = implode("|", array('jpg|jpeg|jpe', 'gif', 'png', 'bmp', 'tif|tiff', 'ico'));
	// Check if media file should be opened
	preg_match("/(.+)\.({$mime_types})/", $wp->request, $is_file);
	if(!empty($is_file)) {
		$upload_dir = wp_upload_dir();
		// Check if media file exists
		$filename = urldecode($wp->request);
		// Check if the file is a thumbnail
		preg_match("/(.*)(-[\d]+x[\d]+)([\S]{3,4})/", $filename, $is_thumb);
		// Prepare the pattern
		$pattern = "{$upload_dir['baseurl']}/%/{$filename}";
		// Use the full size URL in SQL query (remove the thumb appendix)
		$pattern = (!empty($is_thumb[2])) ? preg_replace("/(-[\d]*x[\d]*)/", "", "{$upload_dir['baseurl']}/%/{$filename}") : $pattern;
		$file_url = $wpdb->get_var($wpdb->prepare("SELECT guid FROM $wpdb->posts WHERE guid LIKE %s", $pattern));
		if(!empty($file_url)) {
			// Replace the URL with DIR
			$file_dir = str_replace($upload_dir['baseurl'], $upload_dir['basedir'], $file_url);
			// Now get the thumb dir
			$file_dir = (!empty($is_thumb[2])) ? str_replace($is_thumb[1], "{$is_thumb[1]}{$is_thumb[2]}", $file_dir) : $file_dir;
			// Double check if the file exists
			if(file_exists($file_dir)) {
				$file_mime = mime_content_type($file_dir);
				// Set headers
				header('Content-type: ' . $file_mime);
				readfile($file_dir);
				die();
			}
		}
	}
	return $request;
}
add_filter('request', 'detect_image', 999);
function shorten_media_url($url) {
	return get_home_url() . "/" . basename($url);
}
add_filter('wp_get_attachment_url', 'shorten_media_url');

• This reply was modified 7 years, 5 months ago by xoocode.
• This reply was modified 7 years, 5 months ago by xoocode.

That’s great news, nicely done on finding the issue.

I wish we had the time to assist further with a customisation like this. Unfortunately, at the moment we’re stretched pretty thin. Sorry I can’t offer more.