Hi,

Apologies for the inconvenience. Unfortunately, the Appstream template or any of out other template does not offer a built-in option to swap the logo on hover. However, this can be achieved using custom CSS, though please note that the result may not be as smooth or user-friendly as a native feature.

Thank you for your understanding.

Best regards

Thats fine please send the code for the custom CSS,

I tried this, but its not working

.logo-image:hover { background-image: url(images/Branding/logo-hover.svg)!important; }

Please add the following CSS code to your Template Options -> Custom Code -> Custom CSS

/* Smooth fade-out for the original logo */
.logo-image {
  transition: opacity 0.4s ease-in-out;
}

/* Hide original logo on hover */
.logo:hover .logo-image {
  opacity: 0;
}

/* Base link styling to prepare for background */
.logo a {
  display: inline-block;
  position: relative;
  height: 50px;
  width: 150px; /* adjust to match actual logo dimensions */
  transition: background-image 0.4s ease-in-out, background-size 0.4s ease-in-out;
}

/* Show background logo smoothly on hover */
.logo:hover a {
  background-image: url('2nd_logo_url');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;
}

Hi Atick

Thank you, that worked now do I get them both to be the same size .svg

Please set the 2nd logo then share the site url, I will give you modified CSS as per requirement