Fixing center alignment on mobile logo in Avenue template

Site URL: https://www.asiakeli.com/

I wanted to add a different logo image on hover to my site, so I followed a tutorial that had me upload a blank logo "mask" as the main logo file. The image hover effect is then achieved through the following custom CSS:

.logo {

  background-image: url('https://static1.squarespace.com/static/60de8691b9b79d6982300717/t/6119da7ca80a3404d7c64b16/1629084285594/2021-periwinkle-logo.png');

  background-size: contain;

  background-repeat: no-repeat;

}

.logo:hover {

  background-image: url('https://static1.squarespace.com/static/60de8691b9b79d6982300717/t/6119dacc085c8b02d5c9c0a5/1629084364565/2021-pink-logo.png');

}

It works great on desktop, however I noticed it forces the logo to be left-aligned in mobile. I would like the logo to stay centered on mobile and desktop. The layout style is still set to "center" in my style settings. Is there any way to fix this while keeping the image hover effect? Any help would be appreciated!

On 11/13/2021 at 11:43 AM, AsiaKeli01 said:

Site URL: https://www.asiakeli.com/

I wanted to add a different logo image on hover to my site, so I followed a tutorial that had me upload a blank logo "mask" as the main logo file. The image hover effect is then achieved through the following custom CSS:

 

.logo {

  background-image: url('https://static1.squarespace.com/static/60de8691b9b79d6982300717/t/6119da7ca80a3404d7c64b16/1629084285594/2021-periwinkle-logo.png');

  background-size: contain;

  background-repeat: no-repeat;

}

 

.logo:hover {

  background-image: url('https://static1.squarespace.com/static/60de8691b9b79d6982300717/t/6119dacc085c8b02d5c9c0a5/1629084364565/2021-pink-logo.png');

}

 

It works great on desktop, however I noticed it forces the logo to be left-aligned in mobile. I would like the logo to stay centered on mobile and desktop. The layout style is still set to "center" in my style settings. Is there any way to fix this while keeping the image hover effect? Any help would be appreciated!

Hi @AsiaKeli01,

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #logo .logo {
    background-position: center;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

17 hours ago, bangank36 said:

Hi @AsiaKeli01,

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #logo .logo {
    background-position: center;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Worked like a charm! Thank you so much!