SVG logo disappeared

I uploaded my SVG logo etc. according to the below instructions, and it worked just fine, but then disappeared? 

https://www.adlyticmarketing.com/blog/use-an-svg-logo-in-squarespace#Squarespace_7.1_Code

Can you share link to page where you added svg? We can check easier

I'm having the same issue as well, but only on mobile.   The issue is two-fold:

(1) When I'm in the CSS editor, the logo is there, but it disappears as soon as I exit out of the editor; and

(2) The logo sometimes does randomly show up on mobile after all!  But there's no rhyme or reason or any kind of pattern.  One day it might be there, then the next entire week it's gone.

Here's the code I'm using for both both desktop and mobile (again, desktop is working fine; the issue is only with mobile view):

//SVG LOGO//

/*Desktop*/

.header-title-logo img {
    display: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/61c3d8b86bc99919168b81a7/t/61ede0750a718a6aa7cbd5b9/1642979445222/Primary+Logo.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/*Mobile*/

  .header-mobile-logo img {
      display: none;
    }
  .header-mobile-logo a {
      display: block;
      background-image: url('https://static1.squarespace.com/static/61c3d8b86bc99919168b81a7/t/61ede091d5061928096d480b/1642979473428/Alt+Logo.svg') !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: left center !important;
      width: auto !important;
      height: 35px !important;
      max-height: 60px !important;
  }

site link: https://parsnip-greyhound-2tmc.squarespace.com

pw: svg

Hey Everyone,  I'm having this same issue with the svg logo going random and not showing on mobile. The strange part is the .svg is showing up in a code block in the footer but not in the header🤔.

Here's the site... https://claridgemedia1.squarespace.com/home Password 12345

Here's the code I used in CSS:

/* Hide the normal logo */
.header-title-logo img, .header-mobile-logo img {
  visibility: hidden !important;
}

/* Set background image to be the SVG logo */
.header-title-logo a, .header-mobile-logo a{
  /* Change the "left" below to "center" or "right" if you want the logo positioned in the middle or on the right */
  background: url("/s/Claridge-Media-Wenatchee-Web-Designer-Drone-Photography-Video.svg") no-repeat left !important;
  background-size: contain !important;
  .Mobile-bar-branding-logo {
background-repeat: no-repeat;
background-image: url("/s/Claridge-Media-Wenatchee-Web-Designer-Drone-Photography-Video.svg");
}
}

@tuanphan Any ideas? Thanks!

On 2/1/2022 at 11:42 PM, nazaninp said:

I'm having the same issue as well, but only on mobile.   The issue is two-fold:

(1) When I'm in the CSS editor, the logo is there, but it disappears as soon as I exit out of the editor; and

(2) The logo sometimes does randomly show up on mobile after all!  But there's no rhyme or reason or any kind of pattern.  One day it might be there, then the next entire week it's gone.

Here's the code I'm using for both both desktop and mobile (again, desktop is working fine; the issue is only with mobile view):

 

//SVG LOGO//

/*Desktop*/

.header-title-logo img {
    display: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/61c3d8b86bc99919168b81a7/t/61ede0750a718a6aa7cbd5b9/1642979445222/Primary+Logo.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/*Mobile*/

  .header-mobile-logo img {
      display: none;
    }
  .header-mobile-logo a {
      display: block;
      background-image: url('https://static1.squarespace.com/static/61c3d8b86bc99919168b81a7/t/61ede091d5061928096d480b/1642979473428/Alt+Logo.svg') !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: left center !important;
      width: auto !important;
      height: 35px !important;
      max-height: 60px !important;
  }

 

 

site link: https://parsnip-greyhound-2tmc.squarespace.com

pw: svg

Hi. I just checked & found svg file url doesn't exist. If your site is trial, maybe some upload files won't work.

If your plan is paid, let me know, we will check it again.

On 2/3/2022 at 11:49 PM, claridgemedia said:

Hey Everyone,  I'm having this same issue with the svg logo going random and not showing on mobile. The strange part is the .svg is showing up in a code block in the footer but not in the header🤔.

Here's the site... https://claridgemedia1.squarespace.com/home Password 12345

Here's the code I used in CSS:

/* Hide the normal logo */
.header-title-logo img, .header-mobile-logo img {
  visibility: hidden !important;
}

/* Set background image to be the SVG logo */
.header-title-logo a, .header-mobile-logo a{
  /* Change the "left" below to "center" or "right" if you want the logo positioned in the middle or on the right */
  background: url("/s/Claridge-Media-Wenatchee-Web-Designer-Drone-Photography-Video.svg") no-repeat left !important;
  background-size: contain !important;
  .Mobile-bar-branding-logo {
background-repeat: no-repeat;
background-image: url("/s/Claridge-Media-Wenatchee-Web-Designer-Drone-Photography-Video.svg");
}
}

@tuanphan Any ideas? Thanks!

With code in Custom CSS, you need to use full image url

the code should be

/* Hide the normal logo */
.header-title-logo img, .header-mobile-logo img {
  visibility: hidden !important;
}

/* Set background image to be the SVG logo */
.header-title-logo a, .header-mobile-logo a{
  /* Change the "left" below to "center" or "right" if you want the logo positioned in the middle or on the right */
  background: url("https://claridgemedia1.squarespace.com/s/Claridge-Media-Wenatchee-Web-Designer-Drone-Photography-Video.svg") no-repeat left !important;
  background-size: contain !important;
  .Mobile-bar-branding-logo {
background-repeat: no-repeat;
background-image: url("https://claridgemedia1.squarespace.com/s/Claridge-Media-Wenatchee-Web-Designer-Drone-Photography-Video.svg");
}
}

On 2/8/2022 at 5:27 AM, tuanphan said:

Hi. I just checked & found svg file url doesn't exist. If your site is trial, maybe some upload files won't work.

If your plan is paid, let me know, we will check it again.

Ahhh yes I am still on a trial as I build out the site, so that might be it!  Thank you for the input.  I'll circle back if I'm still running into issues once I upgrade to a paid plan.

So glad I stumbled upon this thread before my brain fried. It was close, thanks, @tuanphan!

Yeah, it seems to be a trial restriction. Did it work out for you too, @nazaninp?

Suppose it makes sense to limit file uploads during the trial, but because it's an image it's easy to forget it uses a workaround.